@layer components {
    /* The automatic (form row) style lives in form-controls.css. These are
       the menu and segmented styles, usable anywhere. */

    .picker__label--hidden {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        margin: -1px;
        padding: 0;
        border: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    /* --- menu: a pop-up button showing the current value ---------------- */

    .picker--style-menu {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        min-inline-size: 0;
    }

    /* With touch a menu picker is a borderless tint button, as on iOS:
       the value and a small chevron.up.chevron.down in the tint. Compact
       density draws the bordered macOS pop-up button instead. */
    .picker--style-menu > .picker__button {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        min-inline-size: 0;
        block-size: var(--control-block-size-small);
        padding-inline: 0;
        border: 0;
        border-radius: calc(var(--control-block-size-small) / 4);
        background-color: transparent;
        color: var(--tint);
        font-size: var(--font-size-body);

        &:has(> .picker__control:focus-visible) {
            outline: 0.125rem solid var(--tint);
            outline-offset: 0.0625rem;
        }

        &:has(> .picker__control:disabled) {
            opacity: 0.5;
        }
    }

    .picker--style-menu .picker__leading {
        display: flex;
        flex-shrink: 0;
    }

    /* An empty tile in the leading slot is a colour swatch. */
    .picker__leading > .tile {
        --tile-size: 0.625rem;
    }

    /* The native select fills the button, so the whole button opens the
       platform menu; the indicator sits over its trailing padding. */
    .picker--style-menu .picker__control {
        flex: 1 1 auto;
        min-inline-size: 0;
        appearance: none;
        border: 0;
        padding: 0 1.25rem 0 0;
        margin-inline-end: -1.25rem;
        background: transparent;
        color: inherit;
        font: inherit;
        text-overflow: ellipsis;
        cursor: pointer;
        field-sizing: content;

        &:focus {
            outline: none;
        }
    }

    .picker--style-menu .picker__indicator {
        display: flex;
        flex-shrink: 0;
        color: inherit;
        pointer-events: none;

        & svg {
            inline-size: 0.875rem;
            block-size: 0.875rem;
        }
    }

    @media (pointer: fine) and (not ((min-width: 120rem) and (display-mode: fullscreen))) {
        .app .picker--style-menu > .picker__button {
            background-color: var(--tertiary-system-background);
            border: 1px solid var(--separator);
            box-shadow: 0 1px 1px
                light-dark(oklch(0% 0 0deg / 6%), oklch(0% 0 0deg / 30%));
            color: var(--label);
            gap: 0.375rem;
            padding-inline: 0.5rem 0.25rem;

            & > .picker__indicator {
                color: var(--secondary-label);
            }

            & .picker__indicator svg {
                block-size: 1rem;
                inline-size: 1rem;
            }
        }
    }

    /* --- segmented: one segment per option, the selected one raised ------ */

    .picker--style-segmented {
        --picker-segmented-block-size: var(--control-block-size-small);

        min-inline-size: 0;
        margin: 0;
        padding: 0;
        border: 0;
    }

    .picker--style-segmented > .picker__label {
        margin-block-end: 0.375rem;
        padding: 0;
        color: var(--secondary-label);
        font-size: var(--font-size-footnote);
    }

    .picker--style-segmented > .picker__label--hidden {
        margin: -1px;
    }

    .picker__segments {
        display: inline-flex;
        align-items: stretch;
        gap: 0;
        padding: 0.125rem;
        border-radius: calc(var(--picker-segmented-block-size) / 2);
        background-color: var(--tertiary-system-fill);
    }

    /* In a glass toolbar item the glass capsule is the track: the segments
       draw no second surface inside it, and the thumb stays concentric. */
    .toolbar-item.glass-effect:has(> .picker--style-segmented) {
        border-radius: calc(var(--control-block-size) / 2);
    }

    .toolbar-item > .picker--style-segmented {
        --picker-segmented-block-size: var(--control-block-size);
    }

    .toolbar-item.glass-effect > .picker--style-segmented .picker__segments {
        background-color: transparent;
    }

    /* On glass a white thumb would vanish into the capsule: the selected
       segment is a neutral fill instead, as in a macOS 26 toolbar. */
    .toolbar-item.glass-effect
        > .picker--style-segmented
        .picker__segment:has(:checked) {
        background-color: light-dark(
            oklch(0% 0 0deg / 9%),
            oklch(100% 0 0deg / 16%)
        );
        box-shadow: none;
    }

    .picker__segment {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        min-block-size: calc(var(--picker-segmented-block-size) - 0.25rem);
        padding-inline: 0.875rem;
        border-radius: calc(var(--picker-segmented-block-size) / 2 - 0.125rem);
        color: var(--label);
        font-size: var(--font-size-callout);
        cursor: pointer;
        white-space: nowrap;
        transition:
            background-color 0.15s ease,
            box-shadow 0.15s ease;

        /* A divider between two unselected neighbours. */
        & + &::before {
            content: "";
            position: absolute;
            inset-block: 0.3125rem;
            inset-inline-start: 0;
            border-inline-start: 1px solid var(--separator);
        }

        &:has(:checked)::before,
        &:has(:checked) + &::before {
            border-color: transparent;
        }

        /* The thumb: a soft contact shadow and a hairline ring, as on
           Apple's segmented controls — not a drop shadow. Dark mode raises
           it with a lighter fill instead. */
        &:has(:checked) {
            background-color: light-dark(
                oklch(100% 0 0deg),
                oklch(52% 0.006 286deg)
            );
            box-shadow:
                0 0 0 0.5px
                    light-dark(oklch(0% 0 0deg / 6%), oklch(100% 0 0deg / 6%)),
                0 1px 1px
                    light-dark(oklch(0% 0 0deg / 8%), oklch(0% 0 0deg / 25%));
            font-weight: 500;
        }

        &:has(:focus-visible) {
            outline: 0.125rem solid var(--tint);
            outline-offset: -0.125rem;
        }

        &:has(:disabled) {
            opacity: 0.5;
            cursor: default;
        }
    }

    /* The radio stays in the tab order (arrow keys move the selection) but
       is not drawn; the label is the segment. */
    .picker__input {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        margin: -1px;
        padding: 0;
        border: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        appearance: none;
    }

    @media (prefers-reduced-motion: reduce) {
        .picker__segment {
            transition: none;
        }
    }
}