@use 'aui';
@import url('https://fonts.googleapis.com/css2?family=Reddit+Mono:wght@200..900&display=swap');

*,
*::before,
*::after {
    box-sizing: border-box;
}


html {
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    font-family: var(--font-family);
    font-size: var(--font-size);
    background-color: var(--bg-pri);
    color: var(--font-color);

    font-weight: 400;
    line-height: var(--line-height);

    overscroll-behavior: none;
    overflow-x: auto;
    overflow-y: auto;

    height: 100dvh;

    /*
    100% width works and won't cause overflow due to the vertival scrollbar. However, as we need to allow
    body to grow, we will no longer have a 100% reference once in body. This is an issue on some browsers
    where the scrollbar is not overlay (such as chrome on ubuntu). So because we cannot use 100vw/dvw on
    such browsers, we switched to container type: inline size. And the body is an inline block, which allows
    it to grow. The reason we let the body grow, is so that sticky left 0 elements will indeed stick to the 
    left. The header then can be 100cqw, which won't cause horizontal scroll. Due to the inline block, 
    the body would naturally shrink, but it can have a min-width 100%. 
    */

    container-type: inline-size;
    container-name: root;

    &.layover-no-scroll {
        overflow-y: hidden !important;
        overflow-x: hidden !important;
    }
}

body {
    margin: 0;
    display: inline-block;
    min-width: 100%;
}

#root {
    display: contents;
}

header {
    position: sticky;
    top: 0;
    left: 0;
    width: 100dvw;
    width: 100cqw;
}

// @media (hover: none) and (pointer: coarse) {
//     header {
//         position: sticky;
//         top: 0;
//         right: unset;
//         width: 100dvw;
//         //   background-color: yellow;
//     }
// }


:root {
    // Generic
    // --font-family: sans-serif;
    --font-family-mono: "Reddit Mono", monospace;
    --font-size: 13px;
    --input-size: 24px;

    --line-height: 1.25;

    --input-border-radius: 3px;
    --button-border-radius: var(--input-border-radius);

    --headerHeight: 50px;
    --tableStickyHeight: var(--headerHeight);

    --font-color-dark: hsl(218, 27%, 94%);
    --font-color-light: hsl(220, 16%, 22%);

    --fw-400: none;
    --fw-425: 0.007em currentColor;
    --fw-450: 0.015em currentColor;
    --fw-475: 0.020em currentColor;
    --fw-500: 0.025em currentColor;
    --fw-550: 0.032em currentColor;
    --fw-600: 0.040em currentColor;
    --fw-650: 0.047em currentColor;
    --fw-700: 0.055em currentColor;

    --ls-400: none;
    --ls-425: none;
    --ls-450: none;
    --ls-475: none;
    --ls-500: none;
    --ls-550: none;
    --ls-600: 0.02em;
    --ls-650: 0.025em;
    --ls-700: 0.03em;

    --auf-disabled-filter: opacity(0.5);
}


html.html-admui {

    // Theme specific
    --font-color: var(--font-color-dark);

    --clr-border: var(--darkNeutral300);

    --bg-table-header: var(--bg-sec-tnt);
    --bg-table-row-odd: var(--bg-pri);
    --bg-table-row-even: white 2%;
    --bg-table-row-hover: white 5%;

    // Main background color
    --bg-pri: hsl(220, 16%, 15%);
    --bg-sec: hsl(220, 16%, 18%);
    --bg-sec-tnt: hsl(220, 18%, 25%);

    --input-box-shadow: inset 0 0 0 1px var(--bg-sec-tnt);
    --input-box-shadow-focus: inset 0 0 0 2px var(--btn-bg-blu-tnt);

    --btn-bg-blu: hsl(213, 32%, 42%);
    --btn-bg-red: hsl(354, 42%, 46%);
    --btn-bg-yel: hsl(14, 41%, 53%);
    --btn-bg-gre: hsl(92, 15%, 46%);

    --btn-bg-blu-tnt: color-mix(in srgb, var(--btn-bg-blu), white 10%);
    --btn-bg-red-tnt: color-mix(in srgb, var(--btn-bg-red), white 10%);
    --btn-bg-yel-tnt: color-mix(in srgb, var(--btn-bg-yel), white 10%);
    --btn-bg-gre-tnt: color-mix(in srgb, var(--btn-bg-gre), white 10%);

    --btn-bg-blu-shd: color-mix(in srgb, var(--btn-bg-blu), black 10%);
    --btn-bg-red-shd: color-mix(in srgb, var(--btn-bg-red), black 10%);
    --btn-bg-yel-shd: color-mix(in srgb, var(--btn-bg-yel), black 10%);
    --btn-bg-gre-shd: color-mix(in srgb, var(--btn-bg-gre), black 10%);

    --btn-fg-blu: var(--font-color-dark);
    --btn-fg-red: var(--btn-fg-blu);
    --btn-fg-yel: var(--btn-fg-blu);
    --btn-fg-gre: var(--btn-fg-blu);

    --tbl-bg-gre: hsla(92, 13%, 35%);
    --tbl-bg-yel: hsl(14, 40%, 40%);
    --tbl-bg-red: hsl(354, 35%, 40%);
    --tbl-bg-blu: hsl(213, 25%, 32%);

    --tbl-bg-gre: hsla(92, 13%, 38%);
    --tbl-bg-yel: hsl(14, 35%, 44%);
    --tbl-bg-red: hsl(354, 31%, 44%);
    --tbl-bg-blu: hsl(213, 17%, 39%);

    --tbl-fg-blu: var(--font-color);
    --tbl-fg-red: var(--tbl-fg-blu);
    --tbl-fg-yel: var(--tbl-fg-blu);
    --tbl-fg-gre: var(--tbl-fg-blu);
}


html.html-admui.light {
    // Theme specific
    --font-color: var(--font-color-light);

    --bg-pri: hsl(218, 27%, 94%);
    --bg-sec: hsl(218, 27%, 90%);
    --bg-sec-tnt: hsl(218, 20%, 81%);

    --font-color: var(220, 16%, 22%);
    --btn-fg-blu: var(220, 16%, 22%);

    --btn-bg-blu: hsl(213, 32%, 47%);
    --btn-bg-red: hsl(354, 42%, 56%);
    --btn-bg-yel: hsl(14, 51%, 63%);
    --btn-bg-gre: hsl(92, 15%, 53%);

    --tbl-bg-gre: hsla(92, 22%, 80%);
    --tbl-bg-yel: hsl(14, 50%, 80%);
    --tbl-bg-red: hsl(354, 55%, 80%);
    --tbl-bg-blu: hsl(213, 22%, 75%);

    --bg-table-row-even: black 3%;
    --bg-table-row-hover: black 6%;
}