html {
    --accent-color: AccentColor;
    --accent-color-text: AccentColorText;
    --canvas: Canvas;
    --canvas-alt: #ccc;
    --canvas-text: CanvasText;
    --invert-text: Canvas;
    --gray-text: GrayText;
    --link-text: LinkText;
    --visited-text: VisitedText;
    --active-Text: ActiveText;
    --mark: Mark;
    --mark-text: MarkText;
    --button-border: GrayText;
    --button-face: ButtonFace;
    --button-text: ButtonText;
    --selected-item: SelectedItem;
    --selected-item-text: SelectedItemText;
    --field: Field;
    --field-text: FieldText;
    --highlight: Highlight;
    --highlight-text: HighlightText;
    background-color: var(--canvas);
    color: var(--canvas-text);
    scrollbar-color: var(--button-face) var(--canvas);
    color-scheme: light dark;
}

html[data-color-scheme="light"] {
    color-scheme: light;
}

html[data-color-scheme="dark"] {
    --accent-color: AccentColor;
    --accent-color-text: AccentColorText;
    --canvas: Canvas;
    --canvas-alt: #333;
    --canvas-text: CanvasText;
    --invert-text: Canvas;
    --gray-text: GrayText;
    --link-text: LinkText;
    --visited-text: VisitedText;
    --active-Text: ActiveText;
    --mark: Mark;
    --mark-text: MarkText;
    --button-border: GrayText;
    --button-face: var(--canvas-alt);
    --button-text: FieldText;
    --selected-item: SelectedItem;
    --selected-item-text: SelectedItemText;
    --field: Field;
    --field-text: FieldText;
    --highlight: Highlight;
    --highlight-text: HighlightText;
    color-scheme: dark;
}

input[type="checkbox"] {
    border-color: var(--button-border);
    background-color: var(--button-face);

    &:checked {
        border-color: transparent;
        background-color: var(--selected-item);
        color: var(--selected-item-text);

        &::after {
            border-color: var(--selected-item-text);
        }
    }
}

select,
::picker(select) {
    border-color: var(--button-border);
    background-color: var(--button-face);
    color: var(--button-text);
}

option {
    &:checked {
        background-color: var(--selected-item);
        color: var(--selected-item-text);
    }
}