:root {
    --accentColor: AccentColor;
    --accentColorText: AccentColorText;
    --accentColor2: color-mix(in srgb, var(--accentColor), var(--accentColorText) 20%);
    --buttonBorder: ButtonBorder;
    --buttonFace: ButtonFace;
    --buttonText: ButtonText;
    --fieldFace: Field;
    --fieldText: FieldText;
    --fieldBorder: ButtonBorder;
    --linkText: LinkText;
    --selectedFace: SelectedItem;
    --selectedText: SelectedItemText;
    --fg: CanvasText;
    --bg: Canvas;
    --gray: GrayText;

    --buttonPadding: .2rem .6rem;
    --buttonBorderSize: 1px;
    --fieldBorderSize: 1px;
    --fieldPadding: .2rem .6rem;
    --buttonRadius: 3px;
    --fieldSpacing: .5rem;
    --fieldRadius: 3px;
    --buttonShadow: none;
    --fieldShadow: none;
    --font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

    --buttonHover: color-mix(in srgb, var(--buttonFace), var(--buttonText) 10%);
}


/* SET THEME */

html {
    color-scheme: light dark;
    font-family: var(--font);
    accent-color: var(--accentColor);
    scroll-behavior: smooth;
}

body,
html {
    background-color: var(--bg);
    color: var(--fg);
    margin: 0;
}

a {
    color: var(--linkText);
    text-decoration: none;
    transition: all .2s;

    &:hover,
    &:focus-visible {
        color: var(--accentColor2);
    }
}

* {
    outline: 2px solid transparent;
    outline-offset: 1px;
    box-sizing: border-box;
}

*:focus-visible {
    outline: 2px solid var(--selectedFace);
}

h1,
h2 {
    font-family: var(--fontHeading);
    word-break: balansed;

    &:first-child {
        margin-top: 0;
    }
}

hr {
    border: none;
    height: 3px;
    background-color: var(--gray, gray);
    border-radius: 1rem;
    margin-top: 2rem;
    margin-bottom: 0;
}

::selection {
    background-color: var(--selectedFace);
    color: var(--selectedText);
}

/* Buttons */

:is(button,
    .button,
    input:is([type="button"], [type="submit"], [type="reset"])):not(.plain) {
    padding: var(--buttonPadding);
    border-radius: var(--buttonRadius);
    border: var(--buttonBorderSize) solid var(--buttonBorder);
    background-color: var(--buttonFace);
    color: var(--buttonText);
    font-size: inherit;
    font-family: inherit;
    margin-top: var(--fieldSpacing);
    font-weight: bold;
    box-shadow: var(--buttonShadow);
    /* transition: all .2s; */
    outline-offset: 0;

    &:not(&:disabled) {
        &:hover {
            cursor: pointer;
        }

        &:hover {
            background-color: var(--buttonHover);
        }

        &:active,
        &:hover,
        &:focus-visible {
            color: var(--buttonText);
            box-shadow: none;
        }

        &:focus-visible {
            outline-offset: 3px;
            background-color: var(--selectedFace);
            color: var(--selectedText);
        }
    }


    &:disabled {
        opacity: 0.5;
    }
}

/* Inputs */
input[type="search"],
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="date"],
textarea,
select {
    padding: var(--fieldPadding);
    border-radius: var(--fieldRadius);
    border: var(--fieldBorderSize) solid var(--fieldBorder);
    background-color: var(--fieldFace);
    color: var(--fieldText);
    margin-top: var(--fieldSpacing);
    resize: none;
    max-width: 100%;
    box-shadow: var(--fieldShadow);
    /* transition: all .2s; */
    font-family: inherit;
    outline-offset: 0;
    font-size: inherit;

    &:first-child {
        margin-top: 0;
    }

    &:focus {
        outline-offset: 3px;
        box-shadow: none;
    }

    & option {
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    }

    &:disabled {
        opacity: 0.8;
    }
}

textarea:not([cols]) {
    width: 100%;
}


/* Fields */

.field-container {
    margin-top: var(--fieldSpacing);

    label+input {
        margin-top: 0;
    }

    &:has(input[type="checkbox"]) {
        display: flex;
        flex-direction: row-reverse;
        justify-content: left;

        input {
            margin-right: .5rem;
        }
    }
}

label+ :is(input[type], input, textarea, select) {
    display: block;
    margin-top: 0;
}

input[type="checkbox"] {
    display: inline-block;
    margin-top: var(--fieldSpacing);
}

label {
    margin-top: var(--fieldSpacing);
    margin-bottom: .2rem;
    display: inline-block;
    cursor: pointer;
    user-select: none;

    &:first-child {
        margin-top: 0;
    }

    +input,
    +textarea,
    +select {
        margin-top: 0;
    }
}




/* Classes */

.color-accent {
    color: var(--accentColor);
}


/* Modal */

body:has(dialog[open]) {
    overflow: hidden;
}



dialog {
    transition: 1s all;
    background-color: var(--bg);
    color: var(--fg);
    border: none;
    border-radius: calc(var(--buttonRadius) * 2);
    box-shadow: var(--buttonShadow);
    border: 2px solid var(--buttonBorder);
    min-width: min(600px, 90vw);
    max-width: min(calc(100% - 2rem), 1400px);

    .loading {
        margin: 2rem 0;
        margin-left: calc(50% - 50px);
        width: 100px;
        height: 100px;
    }

    .loading+form {
        display: none;
    }

    form[method="dialog"] {
        display: inline-block;
        float: right;
    }

    :has(button:last-child)~form[method="dialog"] {
        height: 0;
        margin-top: -2.2rem;
    }

    p>img {
        width: 90vw;
        height: auto;
        max-width: 100%;
    }

    iframe {
        width: 100vw;
        max-width: 100%;
        height: 37.5vw;
        min-height: 30vh;
        max-height: 800px;
        max-width: 100%;
        border: none;
        border-radius: var(--buttonRadius);
    }

    &::backdrop {
        background-color: color-mix(in srgb, var(--gray, gray), transparent);
        backdrop-filter: blur(6px);
    }

    &[open] {
        animation: myFadeIn .3s ease normal;
    }

}

@keyframes myFadeIn {
    from {
        opacity: 0;
        scale: 0.9;
    }

    to {
        opacity: 1;
        scale: 1;
    }
}