livewire-material/resources/css/components/chip-set.css

/*
 * <x-chip-set>: a set of M3 chips (resources/views/components/chip-set.blade.php), named for screen
 * readers as a group.
 *
 * The chips sit 8px apart (M3's chip spacing), in a row that wraps. Above it the label in
 * label-large on-surface-variant, 8px over the row; under it the hint, or the errors in its place,
 * body-small, 4px under the row.
 *
 * `data-md-scroll` keeps the chips on one line that scrolls sideways, as M3 lays chips out on a
 * narrow screen. M3's chips accessibility page asks that a row which overflows say so: the edge the
 * row can still scroll towards (`data-md-scroll-start`, `data-md-scroll-end`, set by
 * resources/js/chips.js) fades over 24px through a mask, black meaning only "opaque" there, and in a
 * right-to-left document the fade runs the other way. Where the pointer is fine, and so there is no
 * swipe, a 32px round button in surface-container-high at elevation 1 sits over each fading edge;
 * the row's scroll padding grows from 24px to 40px there, so a chip the keyboard reaches scrolls
 * clear of the button as well as the fade. The row reaches 6px and 8px past its box so a focused
 * chip's ring and an elevated chip's shadow are not clipped by the scroller.
 *
 *   [data-md-chip-set]              the group; data-md-scroll
 *     [data-md-chip-set-label]
 *     [data-md-chip-set-scroller]   (scrolling) the row and its buttons
 *       [data-md-chip-set-row]      the chips; data-md-scroll-start, data-md-scroll-end
 *       [data-md-chip-scroll="start|end"]
 *     [data-md-chip-set-hint] | [data-md-chip-set-errors]
 */

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

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

@layer material.components {
    [data-md-chip-set] {
        min-width: 0;
    }

    [data-md-chip-set-label] {
        margin-bottom: var(--md-sys-measurement-space100);
        color: var(--md-sys-color-on-surface-variant);
        font: var(--md-sys-typescale-label-lg);
        letter-spacing: var(--md-sys-typescale-label-lg-tracking);
        font-variation-settings: normal;
    }

    [data-md-chip-set-row] {
        display: flex;
        flex-wrap: wrap;
        gap: var(--md-sys-measurement-space100);
    }

    [data-md-chip-set-hint],
    [data-md-chip-set-errors] > p {
        margin-top: var(--md-sys-measurement-space50);
        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-chip-set-errors] > p {
        color: var(--md-sys-color-error);
    }

    /* ---- Scrolling --------------------------------------------------------------------------- */

    [data-md-chip-set-scroller] {
        position: relative;
    }

    [data-md-chip-set-scroller] > [data-md-chip-set-row] {
        --chip-fade-start: 0px;
        --chip-fade-end: 0px;

        flex-wrap: nowrap;
        margin: calc(-1 * var(--md-sys-measurement-space100)) calc(-1 * var(--md-sys-measurement-space75));
        padding: var(--md-sys-measurement-space100) var(--md-sys-measurement-space75);
        overflow-x: auto;
        scroll-padding-inline: var(--md-sys-measurement-space300);
        scrollbar-width: none;
        mask-image: linear-gradient(to right, transparent, black var(--chip-fade-start), black calc(100% - var(--chip-fade-end)), transparent);

        &:dir(rtl) {
            mask-image: linear-gradient(to left, transparent, black var(--chip-fade-start), black calc(100% - var(--chip-fade-end)), transparent);
        }

        &[data-md-scroll-start] {
            --chip-fade-start: var(--md-sys-measurement-space300);
        }

        &[data-md-scroll-end] {
            --chip-fade-end: var(--md-sys-measurement-space300);
        }

        @media (pointer: fine) {
            scroll-padding-inline: var(--md-sys-measurement-space500);
        }
    }

    [data-md-chip-scroll] {
        position: absolute;
        inset-block: 0;
        display: none;
        place-items: center;
        width: 32px;
        height: 32px;
        margin-block: auto;
        border-radius: var(--md-sys-shape-corner-full);
        background-color: var(--md-sys-color-surface-container-high);
        color: var(--md-sys-color-on-surface-variant);
        box-shadow: var(--md-sys-elevation-1);
    }

    [data-md-chip-scroll='start'] {
        inset-inline-start: 0;
    }

    [data-md-chip-scroll='end'] {
        inset-inline-end: 0;
    }

    /* Only while the row can still scroll that way, and only where the pointer cannot swipe. */
    @media (pointer: fine) {
        [data-md-chip-set-row][data-md-scroll-start] ~ [data-md-chip-scroll='start'],
        [data-md-chip-set-row][data-md-scroll-end] ~ [data-md-chip-scroll='end'] {
            display: grid;
        }
    }
}