livewire-material/resources/css/components/pagination.css

/*
 * 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 (a link or a button) in on-surface with
 * the state layer, the focus ring and a 48px target — the declarations of the foundation's
 * `md-state-layer`, `md-focus-ring` and `md-touch-target` (foundation/interaction.css), keyed on the
 * step itself as button.css does, because the views write no class list; 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;
    }

    :is(a, button)[data-md-pagination-step] {
        position: relative;
        isolation: isolate;
        cursor: pointer;
        outline: none;

        &::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: -1;
            border-radius: inherit;
            background-color: currentColor;
            opacity: 0;
            pointer-events: none;
            transition: opacity var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);
        }

        &::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100%;
            height: 100%;
            min-width: var(--md-sys-measurement-space600);
            min-height: var(--md-sys-measurement-space600);
            transform: translate(-50%, -50%);
        }

        @media (hover: hover) {
            &:hover::before {
                opacity: var(--md-sys-state-hover-state-layer-opacity);
            }
        }

        &:focus-visible {
            outline: 3px solid var(--md-sys-color-secondary);
            outline-offset: 2px;
        }

        &:focus-visible::before {
            opacity: var(--md-sys-state-focus-state-layer-opacity);
        }

        &:active::before {
            opacity: var(--md-sys-state-pressed-state-layer-opacity);
        }

        /* Livewire disables previous and next while a page loads. */
        &:disabled::before {
            display: none;
        }
    }

    [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;
        }
    }
}