/* Complete */
@import url('./native/button.css');
@import url('./native/input-textarea-select.css');
@import url('./native/input-checkbox-radio.css');
@import url('./native/label.css');
@import url('./native/fieldset-legend.css');
@import url('./native/p-small-u.css');
@import url('./native/lists.css');
@import url('./native/h.css');
@import url('./native/mark-s-del-ins-i.css');
/* @import url('./native/u-small-strong-b.css'); */
@import url('./native/abbr.css');
@import url('./native/a.css');
@import url('./native/figure-caption.css');
@import url('./native/table.css');
@import url('./native/pre.css');
@import url('./native/code.css');
@import url('./native/details-dialog.css');
@import url('./native/hr-kbd-samp-time-var-wbr.css');
@import url('./native/progress-meter.css');

/* INFO: for some insane reason 🤪 the ::backdrop pseudo element that allows for styling the dialog backdrop doesn't inherit custom properties, so any custom props or styles must be set directly, so add the below to custom themes with theme prefixes and adjust as needed */
dialog::backdrop {
    background: #000000;
    opacity: 0.5;
}

:root,
:host {
    /* color-scheme is needed for some form element icons to correctly render between light and dark */
    color-scheme: var(--base-theme, light);
    accent-color: var(--accent);
    font-family: var(--font);
    font-variant-numeric: tabular-nums;
    font-size: var(--font-size, 1rem);
    line-height: var(--line-height);
    background-color: var(--bg1);
    color: var(--fg1);
}

*:focus {
    outline: none;
}

*:focus-visible {
    outline: var(--outline);
}