/*
 * <x-sort-header>: a column header that sorts the table (resources/views/components/sort-header.blade.php),
 * inside <x-table> (components/table.css), which draws the cell itself.
 *
 * The button is the header's own text, in the header cell's type and colour, with a 16px arrow 4px
 * after it; the corner is extra-small, for the focus ring the button wears (`md-focus-ring`), and
 * `md-touch-target` gives the one-line button M3's 48px target (foundation/interaction.css). The
 * sorted column (`data-md-active`) reads in on-surface with its arrow showing the direction; another
 * column turns on-surface only while hovered, and shows a faint upward arrow while hovered or
 * focused, at 60% of the ink — a hint of what pressing would do, not a state M3 names, fading on the
 * fast effects spring.
 *
 *   [data-md-sort-header]                 the <th>; data-md-active, aria-sort
 *     [data-md-sort-header-button]
 *       [data-md-sort-header-arrow]
 */

@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;

@import './icon.css';

@layer material.components {
    [data-md-sort-header-button] {
        display: inline-flex;
        align-items: center;
        gap: var(--md-sys-measurement-space50);
        border-radius: var(--md-sys-shape-corner-xs);
        cursor: pointer;
    }

    [data-md-sort-header][data-md-active] [data-md-sort-header-button] {
        color: var(--md-sys-color-on-surface);
    }

    @media (hover: hover) {
        [data-md-sort-header-button]:hover {
            color: var(--md-sys-color-on-surface);
        }
    }

    [data-md-sort-header-arrow] {
        transition: opacity var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);
    }

    [data-md-sort-header]:not([data-md-active]) [data-md-sort-header-arrow] {
        opacity: 0;
    }

    [data-md-sort-header]:not([data-md-active]) [data-md-sort-header-button]:focus-visible [data-md-sort-header-arrow] {
        opacity: 0.6;
    }

    @media (hover: hover) {
        [data-md-sort-header]:not([data-md-active]) [data-md-sort-header-button]:hover [data-md-sort-header-arrow] {
            opacity: 0.6;
        }
    }
}