@layer components {
    .fm-slot {
        --slot-gap: var(--space-3);
        --slot-radius: var(--radius-md);
        --slot-line: var(--color-line-strong);
        --slot-line-muted: var(--color-line);
        --slot-surface: var(--color-surface);
        --slot-fg: var(--color-text);
        --slot-muted: var(--color-text-muted);
        --slot-selected-bg: var(--color-selected);
        --slot-selected-fg: var(--color-on-selected);
        --slot-closed-fg: var(--color-unavailable-text);
        --slot-day-off-fg: var(--slot-closed-fg);
        --slot-day-off-line: line-through;
        --slot-day-off-today: underline line-through;
        --slot-hover: var(--color-primary);
        --slot-focus: var(--color-action);
        --slot-focus-on-selected: var(--color-on-selected);
        --slot-skeleton: var(--color-surface-2);
        --slot-tap: var(--min-tap);
        --slot-grid-max: calc(var(--slot-tap) * 7 * 1.5);
        --slot-chip-min: var(--space-13);
        --slot-chip-pad: var(--space-3);
        --slot-sr-size: 1px;
        --slot-columns: minmax(0, 1fr);
        --slot-status-min: 2lh;
        --slot-window-min: 3lh;

        position: relative;
        display: flex;
        flex-direction: column;
        gap: var(--space-5);
        min-inline-size: 0;

        &[data-state="error"] {
            --slot-day-off-fg: var(--slot-muted);
            --slot-day-off-line: none;
            --slot-day-off-today: underline;
        }

        & [hidden] {
            display: none;
        }

        & .fm-slot__value {
            display: none;
        }

        & .fm-slot__fallback {
            position: absolute;
            inset-block-start: 0;
            inset-inline: 0;
            margin: 0;
            color: var(--slot-muted);
        }

        &[data-ready] .fm-slot__fallback {
            display: none;
        }

        &:not([data-ready]) .fm-slot__picker {
            visibility: hidden;
        }

        & .fm-slot__picker {
            display: grid;
            grid-template-columns: var(--slot-columns);
            gap: var(--space-5) var(--col-gap);
            align-items: start;
        }

        & .fm-slot__picker > * {
            min-inline-size: 0;
        }

        & .fm-slot__hint,
        & .fm-slot__window,
        & .fm-slot__placeholder,
        & .fm-slot__status p,
        & .fm-slot__error p {
            margin: 0;
            font-size: var(--text-small);
            color: var(--slot-muted);
        }

        & .fm-slot__key {
            margin: 0;
            max-inline-size: var(--slot-grid-max);
            font-size: var(--text-small);
            color: var(--slot-muted);
        }

        & .fm-slot__sr {
            position: absolute;
            margin: 0;
            inline-size: var(--slot-sr-size);
            block-size: var(--slot-sr-size);
            overflow: hidden;
            clip-path: inset(50%);
            white-space: nowrap;
        }

        & .fm-slot__hint {
            min-block-size: 1lh;

            &[data-done] {
                visibility: hidden;
            }
        }

        & .fm-slot__window {
            min-block-size: var(--slot-window-min);
        }

        & .fm-slot__nav {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--slot-gap);
            max-inline-size: var(--slot-grid-max);
        }

        & .fm-slot__month,
        & .fm-slot__day {
            margin: 0;
            font-family: var(--font-heading);
            font-size: var(--text-h4);
            font-weight: var(--font-weight-heading);
            line-height: var(--leading-heading);
            text-transform: capitalize;
        }

        & .fm-slot__day {
            text-transform: none;
        }

        & .fm-slot__step {
            display: grid;
            place-items: center;
            inline-size: var(--slot-tap);
            block-size: var(--slot-tap);
            padding: 0;
            border: var(--border-w) solid var(--slot-line);
            border-radius: var(--slot-radius);
            background: var(--slot-surface);
            color: var(--slot-fg);
            cursor: pointer;

            &[aria-disabled="true"] {
                border-color: var(--slot-line-muted);
                color: var(--slot-closed-fg);
                cursor: default;
            }
        }

        & .fm-slot__arrow {
            inline-size: var(--space-3);
            block-size: var(--space-3);
            border-block-start: var(--underline-w) solid currentcolor;
            border-inline-start: var(--underline-w) solid currentcolor;
            rotate: -45deg;
        }

        & .fm-slot__step[data-step="1"] .fm-slot__arrow {
            rotate: 135deg;
        }

        & .fm-slot__grid {
            inline-size: 100%;
            max-inline-size: var(--slot-grid-max);
            --table-stroke: transparent;

            border-collapse: collapse;
            table-layout: fixed;

            & th {
                padding-block: var(--space-2);
                font-size: var(--text-label);
                font-weight: var(--font-weight-medium);
                letter-spacing: var(--tracking-label);
                text-transform: uppercase;
                color: var(--slot-muted);
                text-align: center;
            }

            & td {
                padding: 0;
            }

            & .fm-slot__blank {
                display: block;
                inline-size: 100%;
                aspect-ratio: 1;
                min-block-size: var(--slot-tap);
            }

            & button {
                display: grid;
                place-items: center;
                position: relative;
                inline-size: 100%;
                aspect-ratio: 1;
                min-block-size: var(--slot-tap);
                padding: 0;
                border: 0;
                border-radius: var(--slot-radius);
                background: var(--slot-surface);
                box-shadow: inset 0 0 0 var(--border-w) var(--slot-line);
                font: inherit;
                font-size: var(--text-body);
                font-variant-numeric: tabular-nums;
                color: var(--slot-fg);
                cursor: pointer;

                &:hover {
                    box-shadow: inset 0 0 0 var(--underline-w) var(--slot-hover);
                }

                &:focus-visible {
                    outline: var(--focus-w) solid var(--slot-focus);
                    outline-offset: calc(var(--focus-offset) * -1);
                }

                &[aria-current="date"] {
                    text-decoration: underline;
                    text-decoration-thickness: var(--underline-w);
                    text-underline-offset: var(--underline-offset);
                }

                &[aria-disabled="true"] {
                    background: transparent;
                    box-shadow: none;
                    color: var(--slot-day-off-fg);
                    text-decoration: var(--slot-day-off-line);
                    cursor: default;

                    &[aria-current="date"] {
                        text-decoration-line: var(--slot-day-off-today);
                    }

                    &.is-full::after {
                        content: "";
                        position: absolute;
                        inset-block-end: var(--space-2);
                        inline-size: var(--space-2);
                        block-size: var(--space-2);
                        border-radius: 50%;
                        background: var(--slot-line);
                    }
                }

                &[aria-pressed="true"] {
                    background: var(--slot-selected-bg);
                    box-shadow: none;
                    color: var(--slot-selected-fg);
                    text-decoration: none;

                    &:focus-visible {
                        outline-color: var(--slot-focus-on-selected);
                    }
                }
            }

            &[aria-disabled="true"],
            &[aria-busy="true"] {
                --slot-day-off-fg: var(--slot-muted);
                --slot-day-off-line: none;
                --slot-day-off-today: underline;
            }

            &[aria-disabled="true"] button {
                cursor: default;
            }

            &[aria-busy="true"] button {
                background: var(--slot-skeleton);
                box-shadow: none;
            }
        }

        & .fm-slot__times {
            display: flex;
            flex-direction: column;
            gap: var(--slot-gap);
            min-block-size: calc(var(--slot-tap) * 3);

            &[inert] {
                visibility: hidden;
            }
        }

        & .fm-slot__list {
            display: flex;
            flex-direction: column;
            gap: var(--slot-gap);

            &[aria-busy="true"] {
                min-block-size: var(--slot-tap);
                background: var(--slot-skeleton);
            }
        }

        & .fm-slot__group {
            margin: 0;
            font-size: var(--text-label);
            font-weight: var(--font-weight-medium);
            letter-spacing: var(--tracking-label);
            text-transform: uppercase;
            color: var(--slot-muted);
        }

        & .fm-slot__chips {
            display: flex;
            flex-wrap: wrap;
            gap: var(--slot-gap);
        }

        & .fm-slot__chip {
            position: relative;
            display: flex;

            & input {
                position: absolute;
                inset: 0;
                inline-size: 100%;
                block-size: 100%;
                margin: 0;
                opacity: 0;
                cursor: pointer;
            }

            & label {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                min-block-size: var(--slot-tap);
                min-inline-size: var(--slot-chip-min);
                padding-inline: var(--slot-chip-pad);
                border: var(--border-w) solid var(--slot-line);
                border-radius: var(--slot-radius);
                background: var(--slot-surface);
                font-size: var(--text-body);
                font-variant-numeric: tabular-nums;
                color: var(--slot-fg);
            }

            &:hover label {
                border-color: var(--slot-hover);
            }

            & input:focus-visible + label {
                outline: var(--focus-w) solid var(--slot-focus);
                outline-offset: var(--focus-offset);
            }

            & input:checked + label {
                border-color: var(--slot-selected-bg);
                background: var(--slot-selected-bg);
                color: var(--slot-selected-fg);
            }
        }

        & .fm-slot__notices {
            min-block-size: var(--slot-status-min);
        }

        & .fm-slot__status,
        & .fm-slot__error {
            display: flex;
            flex-direction: column;
            gap: var(--space-2);
            align-items: flex-start;
        }

        & .fm-slot__status p.is-urgent,
        & .fm-slot__error p:first-child {
            padding: var(--space-3) var(--space-4);
            border-inline-start: var(--space-1) solid var(--color-warning);
            background: var(--color-warning-surface);
            font-size: var(--text-body);
            color: var(--slot-fg);
        }

        & .fm-slot__error p:first-child {
            border-inline-start-color: var(--color-error);
            background: var(--color-error-surface);
        }

        & .fm-slot__error:empty {
            display: none;
        }

        & .fm-slot__action {
            min-block-size: var(--slot-tap);
            padding: 0 var(--space-5);
            border: var(--border-w) solid var(--slot-line);
            border-radius: var(--slot-radius);
            background: var(--slot-surface);
            font: inherit;
            font-size: var(--text-small);
            color: var(--slot-fg);
            cursor: pointer;

            &:focus-visible {
                outline: var(--focus-w) solid var(--slot-focus);
                outline-offset: var(--focus-offset);
            }
        }

        & .fm-slot__summary {
            display: grid;
            gap: var(--space-2);
            margin: 0;
            padding: var(--space-5);
            background: var(--color-warm);
            font-size: var(--text-small);

            & div {
                display: flex;
                flex-wrap: wrap;
                gap: var(--space-2);
            }

            & dt {
                color: var(--slot-muted);
            }

            & dt::after {
                content: ":";
            }

            & dd {
                margin: 0;
                color: var(--slot-fg);
            }

            & dd[data-empty] {
                color: var(--slot-muted);
            }
        }
    }

    @media (width >= 1024px) {
        .fm-slot {
            --slot-columns: minmax(0, var(--slot-grid-max)) minmax(0, 1fr);
            --slot-status-min: 0;

            & .fm-slot__hint,
            & .fm-slot__summary {
                grid-column: 1 / -1;
            }

            & .fm-slot__nav,
            & .fm-slot__grid,
            & .fm-slot__notices,
            & .fm-slot__key,
            & .fm-slot__window {
                grid-column: 1;
            }

            & .fm-slot__times {
                grid-column: 2;
                grid-row: 2 / span 4;
            }
        }
    }

    @media (width < 24rem) {
        .fm-slot .fm-slot__grid {
            inline-size: calc(100% + var(--space-4));
            max-inline-size: none;
            margin-inline: calc(var(--space-2) * -1);
        }
    }

    @media (prefers-reduced-motion: no-preference) {
        .fm-slot {
            & .fm-slot__grid button,
            & .fm-slot__chip label {
                transition:
                    background-color var(--motion-duration-fast) var(--motion-ease),
                    border-color var(--motion-duration-fast) var(--motion-ease),
                    color var(--motion-duration-fast) var(--motion-ease);
            }
        }
    }
}