/*
 * Rows a person can go into (`data-list-row`, resources/js/list-rows.js), and M3 Expressive lists.
 *
 * A row answers a pointer with M3's state layer — hover 8%, press and focus 10% — but not while the
 * pointer is on one of its own controls, which light only themselves. Hover only under
 * `(hover: hover)`, because a touch screen keeps the last hover after a tap. The opener draws no
 * focus ring inside a row; the row draws it, inset, so keyboard focus shows which row Enter opens.
 * `data-selected` is M3's selected list item, in secondary-container.
 *
 * Unlayered where a component paints its fill as a utility (`<x-card>`): anything in a @layer loses
 * to a utility whatever its specificity.
 */

@layer components {
    :where([data-list-row]) {
        cursor: pointer;
        transition: background-color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast),
            border-radius var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast);
    }

    @media (hover: hover) {
        :where([data-list-row]:not([data-card]):hover:not(:has(:is(a, button, input, select, textarea, label, summary):not([data-list-open]):hover))) {
            background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
        }
    }

    :where([data-list-row]:not([data-card]):has([data-list-open]:focus-visible)) {
        background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);
        outline: 3px solid var(--md-sys-color-secondary);
        outline-offset: -3px;
    }

    :where([data-list-row]:not([data-card]):active:not(:has(:is(a, button, input, select, textarea, label, summary):not([data-list-open]):active))) {
        background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);
    }
}

[data-list-row] [data-list-open]:focus-visible {
    outline: none;
}

[data-list='segmented'] > [data-list-item] {
    background-color: var(--md-sys-color-surface-container);
}

:is([data-list-row], [data-list-item])[data-selected]:not([data-card]) {
    background-color: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

/* A card that opens answers with its container one tone up and its corner opening a step. */
[data-card][data-list-row] {
    transition-property: border-radius, background-color, box-shadow;
    transition-duration: var(--md-sys-motion-spatial-default-duration);
    transition-timing-function: var(--md-sys-motion-spatial-default);
}

@media (hover: hover) {
    [data-card][data-list-row]:hover:not(:has(:is(a, button, input, select, textarea, label, summary):not([data-list-open]):hover)) {
        border-radius: var(--md-sys-shape-corner-lg);
        box-shadow: inset 0 0 0 100vmax color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
    }
}

[data-card][data-list-row]:active:not(:has(:is(a, button, input, select, textarea, label, summary):not([data-list-open]):active)) {
    box-shadow: inset 0 0 0 100vmax color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);
}

[data-card][data-list-row]:has([data-list-open]:focus-visible) {
    outline: 3px solid var(--md-sys-color-secondary);
    outline-offset: 2px;
}

/*
 * M3 Expressive's segmented list (`<x-list segmented>`): each item its own surface, 2px apart,
 * extra-small corners that open to large at the ends, and to large while hovered, pressed or
 * selected (ListTokens, androidx Compose Material 3, Apache-2.0).
 */
[data-list='segmented'] > [data-list-item] {
    border-radius: var(--md-sys-shape-corner-xs);
}

[data-list='segmented'] > [data-list-item]:first-child {
    border-start-start-radius: var(--md-sys-shape-corner-lg);
    border-start-end-radius: var(--md-sys-shape-corner-lg);
}

[data-list='segmented'] > [data-list-item]:last-child {
    border-end-start-radius: var(--md-sys-shape-corner-lg);
    border-end-end-radius: var(--md-sys-shape-corner-lg);
}

@media (hover: hover) {
    [data-list='segmented'] > [data-list-item][data-list-row]:hover {
        border-radius: var(--md-sys-shape-corner-md);
    }
}

[data-list='segmented'] > [data-list-item]:is([data-selected], [data-list-row]:active) {
    border-radius: var(--md-sys-shape-corner-lg);
}