@charset "UTF-8";

@import '_variables.css';

@layer base {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

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

    *:where([type="radio"], [type="range"]):focus-visible {
        outline: none;
    }

    html {
        font: var(--font);
        -webkit-text-size-adjust: 100%;

        /* Prevent html scrollable */
        &:has(dialog[open], dialog[popover]:popover-open) {
            overflow: hidden;
        }
    }

    body {
        accent-color: var(--accent-color);
        color: var(--font-color);
        background: var(--bg-color);
        letter-spacing: var(--letter-spacing);
        line-height: var(--line-height);
    }

    main {
        display: block;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font: var(--h--font-weight) 4rem / var(--h--line-height) var(--h--font-family);
        
        letter-spacing: var(--h--letter-spacing);
        color: var(--h--color);
        
        margin: 2.5rem 0 1.25rem;
    }

    h1 {
        font-size: clamp(2.799rem, calc(2.799rem + 0.125vw), 3.799rem);
    }

    h2 {
        font-size: clamp(2.332rem, calc(2.332rem + 0.125vw), 3.332rem);
    }

    h3 {
        font-size: clamp(1.944rem, calc(1.944rem + 0.125vw), 2.944rem);
    }

    h4 {
        font-size: clamp(1.62rem, calc(1.62rem + 0.125vw), 2.62rem);
    }

    h5 {
        font-size: clamp(1.35rem, calc(1.35rem + 0.125vw), 2.35rem);
    }

    h6 {
        font-size: clamp(1.125rem, calc(1.125rem + 0.125vw), 2.125rem);
    }

    blockquote {
        --data-quoter-marker: attr(data-quoter-marker, "\2014 \00A0");
        border-width: var(--blockquote--border-width);
        border-style: var(--blockquote--border-style);
        border-color: var(--blockquote--border-color);
        padding: 1rem;
        margin: 0 0 0 1rem;

        :where(&) footer {
            color: var(--blockquote_--footer--color);
            margin: var(--blockquote_--footer--margin);
        }

        :where(&) footer:before {
            content: var(--data-quoter-marker);
        }
    }

    ul,
    ol {
        padding: 0 0 0 1.25em;
    }

    fieldset {
        border: var(--boundary--border);
        padding: 0.5rem;
    
        :where(&) > label {
            margin: 0 1rem 0 0;
        }
    }

    legend {
        color: inherit;
        display: table;
        padding: 0; /* 3 */
        white-space: normal;
    }

    details {
        display: block;
    }

    summary {
        cursor: pointer;
        display: list-item;
    }

    dt {
        font-weight: bold;
    }

    pre {
        color: var(--pre--color);
        background: var(--pre--background);
        border: var(--pre--border);
        padding: 1rem;
        overflow: auto;
    }

    hr {
        border: var(--boundary--border);
        border-width: 0 0 1px;
        box-sizing: content-box;

        color: inherit;
        overflow: visible;
        margin: 0.5rem 0;
    }

    a {
        display: inline-block;

        &:focus,
        &:hover {
            filter: brightness(105%);
        }

        &:visited {
            color: var(--href--visited-color);
        }
    }

    [href] {
        color: var(--href--color);
    }

    abbr[title] {
        border-bottom: none;
        -webkit-text-decoration: underline dotted;
        text-decoration: underline dotted;
    }

    audio,
    video {
        display: inline-block;
    }

    audio:not([controls]) {
        display: none;
    }

    b,
    strong {
        font-weight: bold;
    }

    code,
    kbd,
    samp {
        font: normal var(--cks--font-weight) var(--cks--font-size) var(--cks--font-family);
        font-optical-sizing: auto;
    }

    code {
        color: var(--code--color);
        background: var(--code--background);
    }

    kbd {
        color: var(--kbd--color);
        background: var(--kbd--background);
        border-radius: var(--kbd--border-radius);

        &:has(kbd) {
            background-color: unset;
            border: var(--kbd_-kbd--border);
            border-width: var(--kbd_-kbd--border-width);
            padding: var(--kbd_-kbd--padding);
        }
        
        kbd {
            font-weight: var(--kbd_-kbd--font-weight);
            
            color: var(--kbd_-kbd--color);
            background-color: unset;
        }
    }

    small {
        font-size: 80%;
    }

    sub,
    sup {
        font-size: 75%;
        line-height: 0;
        position: relative;
        vertical-align: baseline;
    }

    sub {
        bottom: -0.25em;
    }

    sup {
        top: -0.5em;
    }

    img {
        border: none;
        
        max-height: 90vh;
        max-width: 90vw;
        
        display: inline-block;
    }
    
    figure {
        :where(&) img {
            margin: auto auto 0.5rem;
            line-height: 1;
        }
    }
    
    figcaption {
        font-size: 0.875em;
    }
    
    button,
    input,
    optgroup,
    option,
    select,
    textarea {
        color: var(--controls--font-color);
        font: var(--font-weight) var(--font-size)/var(--line-height) var(--font-family);
    }
    
    button,
    input,
    optgroup,
    select,
    textarea {
        border: var(--controls--border);
        margin: 0;
        min-height: var(--controls--min-height);
        padding: var(--controls--padding);
    }
    
    button,
    input,
    select {
        text-transform: none;
    }

    button,
    [type="button"],
    [type="reset"],
    [type="submit"],
    .btn {
        cursor: pointer;

        font: var(--btn--font);
        line-height: var(--btn--line-height);
        color: var(--btn--font-color,);

        background-color: var(--btn--bg-color, revert);

        border: 0 var(--btn--border-style) var(--btn--border-color, initial);
        border-width: var(--btn--borders-width, 1px);
        border-radius: var(--btn--borders-radius);

        box-shadow: var(--btn--shadow,);

        min-height: var(--controls--min-height);

        position: relative;

        padding: var(--btn--paddings);
        text-align: center;
        text-decoration: none;
        vertical-align: middle;

        overflow: visible;

        -webkit-appearance: button;
        -moz-appearance: button;
        appearance: button;

        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;

        :where(&:active):not(:disabled) {
            transform: translateY(1px);
            box-shadow: none;
        }

        &:disabled {
            color: revert;
        }

        &:focus-visible {
            box-shadow: none;
        }
    }

    input {
        overflow: visible;
    }

    [type="color"] {
        cursor: pointer;
        background: inherit;
        padding: 0.25em;
        min-height: 2rem;
    }

    [type="checkbox"],
    [type="radio"] {
        min-height: initial;
        padding: 0;
    }

    [type="date"],
    [type="datetime-local"],
    [type="month"],
    [type="week"],
    [type="time"] {
        padding: 0.125em 0.25em;
    }

    [type="number"]::-webkit-inner-spin-button,
    [type="number"]::-webkit-outer-spin-button {
        height: auto;
    }

    [type="search"] {
        -webkit-appearance: textfield;
        appearance: textfield;
    }

    [type="search"]::-webkit-search-decoration {
        -webkit-appearance: none;
    }

    [type="file"] {
        padding: 0 0.125em 0 0;
    }

    ::file-selector-button {
        -webkit-appearance: button;
        font: inherit;
        padding: 0.125em 0.25em;
        margin: -1px 0.125em -1px -1px;
    }

    progress {
        display: inline-block;
        vertical-align: baseline;
    }

    select {
        min-width: 1.7em;
    }

    select optgroup {
        border: none;
    }

    optgroup {
        color: var(--font-color-alt-1);
        padding: 0.125em;
    }

    option {
        margin: 0 0 0 .5em;
        padding: 0.25em 0.25em 0.125em;
    }

    textarea {
        overflow: auto;
        vertical-align: top;
    }

    svg:not(:root) {
        overflow: hidden;
    }

    table {
        text-indent: 0;
        border-color: inherit;
    }
    
    th {
        color: var(--font-color-alt-1);
    }

    td {
        padding: 0.5em;
    }

    /**
     * Dialog show once per-event (call), then remove the elemen from DOM. 
     * Popover, just hide the element when not in use.
     */
    dialog,
    [popover] {
        /* Start fade in, end fade out. */
        pointer-events: none;
        
        color: inherit;
        background: var(--bg-color);
        border: none;
        opacity: 0;
        
        box-shadow: var(--shadow-float);
        
        position: fixed;
        inset: 50% auto auto 50%;

        display: none;
        padding: 1rem;

        text-align: initial;
        
        overflow: visible;

        z-index: 1000;
        
        transform: translate(-50%, -50%) scale(0.85);
        transition:
            opacity 350ms ease-in-out,
            transform 350ms ease-in-out,
            overlay 350ms allow-discrete,
            display 350ms allow-discrete;
    }

    dialog {
        min-height: 5rem;
        height: var(--dialog--height, auto);
        max-height: calc(100vh - 4rem);
        
        min-width: clamp(280px, 100vw - 4rem, 400px);
        width: var(--dialog--width, auto);
        max-width: clamp(280px, 100vw - 4rem, 1160px);
    }

    [popover] {
        height: var(--popover--height, auto);
        max-height: calc(100vh - 2rem);
        
        width: var(--popover--width, auto);
        max-width: clamp(4rem, 100vw - 2rem, 1200px);
    }

    dialog[open],
    [popover]:popover-open {
        /* End fade in; start fade out. */
        pointer-events: initial;
        
        opacity: 1;
        
        display: block;
        transform: translate(-50%, -50%) scale(1);
            
        /* Start values for fade in. */
        @starting-style {
            opacity: 0;
            transform: translate(-50%, -50%) scale(0.85);
        }
    }

    dialog::backdrop,
    [popover]::backdrop {
        background: var(--backdrop--bg-color);
        backdrop-filter: blur(0.5rem);
    }

    template {
        display: none;
    }

    input,
    textarea,
    select,
    [type="color"] {
        background: var(--input--bg-color);
    }

    [type="checkbox"],
    [type="file"],
    [type="radio"],
    [type="range"] {
        cursor: pointer;
    }

    [type="range"]:focus-visible::-webkit-slider-thumb {
        border-radius: 50%;
        outline: var(--focus-outline);

        height: 0.8em;
        width: 0.8em;
    }

    [type="radio"]:focus-visible {
        box-shadow: var(--focus--box-shadow);
    }

    [disabled] {
        cursor: not-allowed;
        filter: contrast(.5);
    }

    [hidden] {
        display: none;
    }

    :where(
        dl,
        ol,
        ul,
        fieldset,
        p,
        details,
        pre,
        form,
        address,
        blockquote,
        figure,
        table
    ):has(
        + :is(
            dl,
            ol,
            ul,
            fieldset,
            p,
            details,
            pre,
            form,
            address,
            blockquote,
            figure,
            table,
            nav
        )
    ) {
        margin-bottom: var(--elements-block-level-space);
    }

    /*Fix outline for :focus-visible*/
    input,
    select,
    textarea,
    audio,
    video,
    details,
    button,
    [type="button"],
    [type="reset"],
    [type="submit"],
    .btn {
        margin: 0.25rem;
    }

    @-moz-document url-prefix() {
        button,
        [type="button"],
        [type="reset"],
        [type="submit"],
        .btn {
            padding: var(--moz-btn-paddings);
        }

        textarea,
        [type="email"],
        [type="number"],
        [type="password"],
        [type="search"],
        [type="tel"],
        [type="text"],
        [type="url"],
        [type="date"],
        [type="datetime"],
        [type="datetime-local"],
        [type="month"],
        [type="week"],
        [type="time"] {
            padding: var(--moz-input--paddings);
        }

        select {
            min-width: 1.5em;
            padding: var(--moz-input--select-paddings);

            &:focus {
                outline: var(--focus-outline);
            }
        }

        input[type=range] {
          background: transparent;
          border: none;

            &:active {
                filter: brightness(120%);
            }

            &::-moz-range-thumb {
                background: var(--accent-color);
                border: none;

                height: 1rem;
                width: 1rem;
            }

            &:focus-visible::-moz-range-thumb {
                outline: var(--focus-outline);
            }

            &::-moz-range-track {
                cursor: pointer;
                background: var(--accent-color);
                border-radius: .25rem;
                height: .5rem;
            }
        }
    }
}