/* src/components/basic/XWUIList/XWUIList.css */
/**
 * XWUIList Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/balanced.css (global border widths)
 * - Roundness: theme/roundness/rounded.css (global roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-list-select-all {
    padding: var(--spacing-sm, 0.75rem) var(--spacing-md, 1rem);
    border-bottom: var(--border-list-width, var(--border-width-regular, 1.5px)) var(--border-list-style, solid) var(--border-list-color, var(--border-color));
    display: flex;
    align-items: center;
}

.xwui-list-select-all label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 0.5rem);
    cursor: pointer;
    font-weight: var(--font-weight-medium, 500);
}

.xwui-list-select-all-checkbox {
    cursor: pointer;
}

.xwui-list-item-checkbox {
    margin-right: 0.75rem;
    cursor: pointer;
}

/* XWUIItem's row is `display: block` - its own flex layout lives one level
 * deeper, in `.xwui-item-standard-layout`. A prepended checkbox/drag-handle
 * is a sibling of THAT block-level div, so without this it drops to its own
 * line instead of sitting inline beside the row content. Scoped to XWUIList
 * only - not a change to XWUIItem's own CSS. */
.xwui-list [data-id]:has(> .xwui-list-item-checkbox),
.xwui-list [data-id]:has(> .xwui-list-item-drag-handle) {
    display: flex;
    align-items: center;
}

.xwui-list-item-checked {
    background: var(--bg-secondary);
}

/* ── Drag-to-reorder ──────────────────────────────────────────────────────*/
.xwui-list-item-drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.25rem;
    margin-right: var(--spacing-xs, 0.375rem);
    color: var(--text-tertiary, var(--text-secondary));
    cursor: grab;
    touch-action: none;
}
.xwui-list-item-drag-handle svg {
    display: block;
}
.xwui-list-reorderable [data-id]:hover .xwui-list-item-drag-handle {
    color: var(--text-secondary);
}
.xwui-list-item-dragging {
    opacity: 0.5;
    cursor: grabbing;
}
.xwui-list-item-dragging .xwui-list-item-drag-handle {
    cursor: grabbing;
}

.xwui-list {
    display: flex;
    flex-direction: column;
}

.xwui-list-bordered {
    border: var(--border-list-width, var(--border-width-regular, 1.5px)) var(--border-list-style, solid) var(--border-list-color, var(--border-color));
    border-radius: var(--radius-list, var(--radius-md, 8px));
    overflow: hidden;
}

/* HIG-style list variants */
.xwui-list-plain {
    background: transparent;
}

.xwui-list-grouped {
    background: var(--bg-secondary);
    border-radius: var(--radius-list);
}

.xwui-list-grouped [data-id] {
    background: var(--bg-primary);
    margin: var(--spacing-xs) 0;
    border-radius: var(--radius-sm);
}

.xwui-list-inset [data-id] {
    margin-left: var(--spacing-md);
    margin-right: var(--spacing-md);
    border-radius: var(--radius-sm);
}

.xwui-list-hoverable [data-id] {
    transition: background 0.2s;
}

.xwui-list-hoverable [data-id]:hover {
    background: var(--bg-secondary);
}

/* Size variants (canonical 9-step scale) */
:is(.xwui-list-3xs,.xwui-list-xxxs) { font-size: var(--font-size-xs, 0.5rem); }
:is(.xwui-list-4xs,.xwui-list-xxxxs) { font-size: var(--font-size-xs, 0.5rem); }
:is(.xwui-list-2xs,.xwui-list-xxs) { font-size: var(--font-size-xs, 0.625rem); }
.xwui-list-xs { font-size: var(--font-size-xs, 0.75rem); }
:is(.xwui-list-s,.xwui-list-sm) { font-size: var(--font-size-sm, 0.8125rem); }
:is(.xwui-list-m,.xwui-list-md) { font-size: var(--font-size-sm, 0.875rem); }
:is(.xwui-list-l,.xwui-list-lg) { font-size: var(--font-size-base, 0.9375rem); }
.xwui-list-xl { font-size: var(--font-size-base, 1.0625rem); }
:is(.xwui-list-2xl,.xwui-list-xxl) { font-size: var(--font-size-lg, 1.375rem); }
:is(.xwui-list-3xl,.xwui-list-xxxl) { font-size: var(--font-size-xl, 1.7rem); }
:is(.xwui-list-4xl,.xwui-list-xxxxl) { font-size: var(--font-size-xl, 1.7rem); }

/* Legacy size aliases */
.xwui-list-small { font-size: var(--font-size-sm, 0.8125rem); }
.xwui-list-medium { font-size: var(--font-size-sm, 0.875rem); }
.xwui-list-large { font-size: var(--font-size-base, 0.9375rem); }

/* Density (M3, Fluent, Carbon) - item padding via list padding / select-all */
.xwui-list[data-density="compact"] .xwui-list-select-all,
.xwui-list[data-density="compact"] [data-id] {
    padding: var(--control-padding-y-compact) var(--control-padding-x-compact);
}
.xwui-list[data-density="comfortable"] .xwui-list-select-all,
.xwui-list[data-density="comfortable"] [data-id] {
    padding: var(--control-padding-y-comfortable) var(--control-padding-x-comfortable);
}
.xwui-list[data-density="spacious"] .xwui-list-select-all,
.xwui-list[data-density="spacious"] [data-id] {
    padding: var(--control-padding-y-spacious) var(--control-padding-x-spacious);
}