/* Keep this stylesheet unlayered and free of nesting/modern color functions:
   older browsers must be able to read it even when daisyUI cannot be parsed. */
@supports not ((appearance: base-select) and (color: oklch(100% 0 0))) {
    select {
        -webkit-appearance: auto;
        -moz-appearance: auto;
        appearance: auto;
        display: inline-block;
        box-sizing: border-box;
        max-width: 100%;
        min-height: 2rem;
        background: #ffffff;
        color: #0f172a;
        border: 1px solid #cbd5e1;
        border-radius: 0.5rem;
        padding: 0.375rem 0.625rem;
        font-family: 'yekan-fu-num', Tahoma, Arial, sans-serif;
        font-size: 0.875rem;
        line-height: 1.5;
        box-shadow: none;
        color-scheme: light;
    }

    select option,
    select optgroup {
        background: #ffffff;
        color: #0f172a;
        font-family: inherit;
    }

    select:focus-visible {
        outline: 2px solid #0891b2;
        outline-offset: 2px;
    }

    select:disabled {
        background: #f1f5f9;
        color: #64748b;
        cursor: not-allowed;
    }

    select option:disabled,
    select optgroup:disabled {
        color: #64748b;
    }
}

/* The web-rendered picker needs its own opaque surface. Do not inherit a
   potentially transparent select background inside a modal/backdrop. */
@supports (appearance: base-select) and (color: oklch(100% 0 0)) {
    select.select::picker(select) {
        background: #ffffff;
        color: #0f172a;
        border: 1px solid #cbd5e1;
        /* Percentages resolve against the available anchor-position area,
           unlike vh which ignores where the select sits in the viewport.
           stretch also subtracts the picker's margins from that space. */
        box-sizing: border-box;
        max-block-size: calc(100% - 1rem);
        max-block-size: stretch;
        position-try-order: most-block-size;
        position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}
