/*
 * <x-select>: the native <select> in the text field's chrome, drawn as M3's exposed dropdown menu
 * (resources/views/components/select.blade.php).
 *
 * The chrome is the field's (components/field.css); this file is what a <select> changes in it. The
 * select covers its whole field, so a press anywhere opens it and the list the browser anchors to
 * it is the field's width. Where the browser has the customizable select (`appearance:
 * base-select`), the closed select loses the button chrome that brings, the field reads as focused
 * while the list is open, and the arrow turns over. The open list itself is M3's menu, drawn by
 * components/menu.css.
 *
 * A value too long for the field ends before the arrow with an ellipsis. The native select cuts its
 * own text at its end padding; the customizable one draws the value in a box of its shadow tree
 * that no author style reaches, so the view gives it a `<button>` holding `<selectedcontent>`, the
 * browser's copy of the chosen option, and the ellipsis is drawn there.
 *
 * The field's root carries `data-md-select`.
 */

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

@import './field.css';
@import './icon.css';
@import './menu.css';

@layer material.components {
    /* A select covers its whole field — out over the padding and the leading icon at
       the start, under the arrow to the end — and its own padding puts the value back
       where it was. So a press anywhere on the field opens it, and the list, which
       the browser anchors to the select, is the field's width (components/menu.css).
       A value longer than the field is cut at that padding, with an ellipsis, rather
       than running on under the arrow. */
    select[data-md-field-control] {
        --field-end: calc(var(--field-icon) + var(--field-gap) + var(--field-pad));

        appearance: none;
        cursor: pointer;
        margin-inline: calc(-1 * var(--field-start)) calc(-1 * var(--field-end));
        padding-inline: var(--field-start) var(--field-end);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    select[data-md-field-control]:disabled {
        cursor: default;
    }

    /* Where the browser has a customizable select, the closed select is its own
       button: without the border, padding and arrow that button brings, it is the
       same field as before. While its list is open the field reads as focused —
       said from `:open`, because focus inside the list is in the top layer — in
       the error colour when the field is in error, as a focused one is — and the
       arrow turns over, as the searchable choices' does. Both outweigh field.css's
       hover, so the pointer left on the field does not take the focus edge away. */
    @supports (appearance: base-select) {
        select[data-md-field-control] {
            appearance: base-select;
            display: flex;
            align-items: center;
            border: 0;
            padding-block: 0;
            border-radius: 0;
            background: transparent;
        }

        /* The customizable select's value is `<selectedcontent>`, the only part of the
           closed select an author style reaches: the box the browser draws otherwise
           takes neither `text-overflow` nor a width from the select, and ran on under
           the arrow. As the select's flex item it may shrink to the room left. */
        select[data-md-field-control] selectedcontent {
            flex: 1 1 0%;
            min-width: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        select[data-md-field-control]::picker-icon {
            display: none;
        }

        [data-md-field-box]:has(select[data-md-field-control]:open) {
            --field-edge: var(--md-sys-color-primary);
            --field-ink: var(--md-sys-color-primary);

            [data-md-field-outline] {
                border-width: 2px;
            }
        }

        [data-md-field][data-md-invalid] [data-md-field-box]:has(select[data-md-field-control]:open) {
            --field-edge: var(--md-sys-color-error);
            --field-ink: var(--md-sys-color-error);
        }

        [data-md-field]:has(select[data-md-field-control]:open) [data-md-field-arrow] {
            rotate: 180deg;
        }
    }
}