/*
 * The paginators, Laravel's and Livewire's, drawn in M3 (resources/views/pagination/**): the package
 * puts its views in front of the frameworks' `tailwind` and `simple-tailwind` ones, whose names they
 * keep.
 *
 * The numbered paginator is a row: on its start, what the page holds in body-small on-surface-variant
 * — "21–30 of 95", or "Page 3 of 10" below `medium` (600px), where the page numbers give way and only
 * previous and next stay — and on its end the steps, 4px apart. A step is a 40px circle in label-large
 * with tabular figures, M3's icon-button geometry: a live one in on-surface with the state layer, the
 * focus ring and a 48px target (`md-state-layer`, `md-focus-ring`, `md-touch-target`,
 * foundation/interaction.css); the current page is the selected state, secondary-container, never the
 * action colour — it is where you are, not what to do next; an unreachable one (`aria-disabled`) is
 * on-surface at 38%. The chevrons mirror in a right-to-left page. The simple paginator is the same
 * row holding two outlined buttons.
 *
 *   [data-md-pagination]                   the <nav>
 *     [data-md-pagination-summary]         [data-md-pagination-compact], [data-md-pagination-range]
 *     [data-md-pagination-steps]
 *       [data-md-pagination-step]          aria-current="page", aria-disabled="true";
 *                                          [data-md-pagination-page] is a number, hidden below 600px
 */

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

@import './button.css';
@import './icon.css';

@layer material.components {
    [data-md-pagination] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--md-sys-measurement-space200);
    }

    [data-md-pagination-summary] {
        color: var(--md-sys-color-on-surface-variant);
        font: var(--md-sys-typescale-body-sm);
        letter-spacing: var(--md-sys-typescale-body-sm-tracking);
        font-variation-settings: normal;
    }

    [data-md-pagination-steps] {
        display: flex;
        align-items: center;
        gap: var(--md-sys-measurement-space50);
    }

    [data-md-pagination-step] {
        display: grid;
        place-items: center;
        width: var(--md-sys-measurement-space500);
        height: var(--md-sys-measurement-space500);
        border-radius: var(--md-sys-shape-corner-full);
        color: var(--md-sys-color-on-surface);
        font: var(--md-sys-typescale-label-lg);
        letter-spacing: var(--md-sys-typescale-label-lg-tracking);
        font-variation-settings: normal;
        font-variant-numeric: tabular-nums;
    }

    button[data-md-pagination-step] {
        cursor: pointer;
    }

    [data-md-pagination-step][aria-current='page'] {
        background-color: var(--md-sys-color-secondary-container);
        color: var(--md-sys-color-on-secondary-container);
    }

    [data-md-pagination-step][aria-disabled='true'] {
        color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent);
    }

    @media (width < 600px) {
        [data-md-pagination-page],
        [data-md-pagination-range] {
            display: none;
        }
    }

    @media (width >= 600px) {
        [data-md-pagination-compact] {
            display: none;
        }
    }
}