:root {
    --native-select-color-scheme: dark;
    --native-select-option-bg: Canvas;
    --native-select-option-text: CanvasText;
    --native-select-option-selected-bg: Highlight;
    --native-select-option-selected-text: HighlightText;
    --native-select-option-disabled-text: GrayText;
    --native-select-focus: #f8d778;
}

select {
    color-scheme: var(--native-select-color-scheme, dark);
}

select option,
select optgroup {
    background-color: #120718;
    background-color: var(--native-select-option-bg, Canvas);
    color: #f8f6ff;
    color: var(--native-select-option-text, CanvasText);
}

select optgroup {
    font-weight: 700;
}

select option:checked,
select option:focus,
select option:hover {
    background-color: #5b1a7a;
    background-color: var(--native-select-option-selected-bg, Highlight);
    color: #fff;
    color: var(--native-select-option-selected-text, HighlightText);
}

select option:disabled,
select optgroup:disabled {
    color: #b8aacb;
    color: var(--native-select-option-disabled-text, GrayText);
}

select:disabled {
    color: #b8aacb;
    color: var(--native-select-option-disabled-text, GrayText);
    opacity: 1;
    cursor: not-allowed;
}

select:focus-visible {
    outline: 2px solid var(--native-select-focus, #f8d778);
    outline-offset: 2px;
}