:root {
    --highlight: white;
    --off: black;

    --styled-text-mix: 20%;

    --default-style-mix: 10%;
    --faint-bg-mix: 10%;
    --faint-line-mix: 20%;

    font-size: 18px;
    font-family: sans-serif;
}

:root.dark-background {
    --default-style-mix: 40%;
    --faint-bg-mix: 20%;
    --faint-line-mix: 40%;
    --highlight: black;
    --off: white;
}

label {
    display: block;
}

* {
    --styled-background: color-mix(in oklab, var(--background), var(--text) var(--default-style-mix));
    --styled-text: var(--text);

    --medium-line-color: color-mix(in oklab, var(--background), var(--text) 50%);
    --faint-line-color: color-mix(in oklab, var(--background), var(--text) var(--faint-line-mix));
    --faint-background: color-mix(in oklab, var(--background), var(--text) var(--faint-bg-mix));
}

#color-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, 10em);
    grid-gap: 1em;
    margin: 1em 0;
    text-align: center;
    text-transform: capitalize;
    
    & input {
        width: 100%;
    }
}

#preview {
    background-color: var(--background);
    color: var(--text);
    padding: 1em;


    & a {
        --highlight-amount: 0%;
        --off-amount: 0%;
        color: 
            color-mix(in oklab,
                color-mix(in oklab, 
                    var(--link),
                    var(--highlight)
                    var(--highlight-amount)
                ),
                var(--off)
                var(--off-amount)
            );

        &:hover {
            --highlight-amount: 20%;
        }
        &:focus {
            --highlight-amount: 40%;
        }
        &:active {
            --off-amount: 20%;
        }
        &:visited {
            --off-amount: 40%;
        }
    }

    & .success {
        color: color-mix(in oklab, var(--success), var(--text) var(--styled-text-mix));
        --styled-background: var(--success);
        --styled-text: var(--success-text);
    }

    & .primary {
        color: color-mix(in oklab, var(--primary), var(--text) var(--styled-text-mix));
        --styled-background: var(--primary);
        --styled-text: var(--primary-text);
    }

    & .info {
        color: color-mix(in oklab, var(--info), var(--text) var(--styled-text-mix));
        --styled-background: var(--info);
        --styled-text: var(--info-text);
    }

    & .warning {
        color: color-mix(in oklab, var(--warning), var(--text) var(--styled-text-mix));
        --styled-background: var(--warning);
        --styled-text: var(--warning-text);
    }

    & .danger {
        color: color-mix(in oklab, var(--danger), var(--text) var(--styled-text-mix));
        --styled-background: var(--danger);
        --styled-text: var(--danger-text);
    }

    & .muted {
        color: color-mix(in oklab, var(--muted), var(--text) var(--styled-text-mix));
        --styled-background: var(--muted);
        --styled-text: var(--muted-text);
    }

    button:is(*, .success, .info, .warning, .danger, .muted, .primary) {
        --highlight-amount: 0%;
        --off-amount: 0%;
        --mixed-styled-background: 
            color-mix(in oklab,
                color-mix(in oklab, 
                    var(--styled-background),
                    var(--highlight) 
                    var(--highlight-amount)
                ),
                var(--off)
                var(--off-amount)
            );
        --button-border: color-mix(in oklab, var(--mixed-styled-background), var(--off) 30%);
        background-color: var(--mixed-styled-background);
        border: medium solid var(--button-border);
        color: var(--styled-text);
        font-size: 1em;

        &:hover {
            --highlight-amount: 20%;
        }
        &:focus {
            --highlight-amount: 40%;
        }
        &:active {
            --off-amount: 20%;
        }

        &.info {
            --styled-background: var(--info);
            color: var(--info-text);
        }

        &.warning {
            --styled-background: var(--warning);
            color: var(--warning-text);
        }

        &.danger {
            --styled-background: var(--danger);
            color: var(--danger-text);
        }

        &.primary {
            --styled-background: var(--primary);
            color: var(--primary-text);
        }
        padding: 0.25em 0.5em;
    }

    & .alert {
        padding: 1em;
        margin: 1em 0;
        --alert-background: color-mix(in oklab, var(--styled-background), var(--text) 10%);
        --alert-border: color-mix(in oklab, var(--alert-background), var(--off) 10%);
        color: var(--styled-text);

        background-color: var(--alert-background);
        
        border: medium solid var(--alert-border);
    }
    
    & nav {
        background: var(--main);
        color: var(--main-text);
        padding: 0.5em;
    }

    & hr {
        border: thin solid var(--medium-line-color);

        &.faint {
            border: thin solid var(--faint-line-color);
        }
    }
    
    & input {
        border: thin solid var(--faint-line-color);
        border-bottom-color: var(--text);
        border-bottom-width: thin;
        background-color: var(--background);
        color: var(--text);
        font-size: 1em;
        --styled-background: var(--background);
        background-color: color-mix(in oklab, var(--background), var(--styled-background) var(--faint-line-mix));
        
        &.answered {
            --styled-background: var(--info);
        }
        
        &.has-errors {
            --styled-background: var(--danger);
        }
        
        &.has-warnings {
            --styled-background: var(--warning);
        }
    }

    & pre,code, kbd {
        background: var(--faint-background);
        padding: 0.5em;
    }

    & kbd {
        border: thin solid var(--medium-line-color);
        padding: 0.2em;
        margin: 0 0.2em;
    }
}