/* Licensed to the Chroma Control Contributors under one or more agreements. */
/* The Chroma Control Contributors licenses this file to you under the MIT license. */
/* See the LICENSE file in the project root for more information. */

:root,
[data-theme=light] {
    --foreground-color-default: #212121;
    --foreground-color-muted: #69696c;
    --foreground-color-inset: #ffffff;
    --foreground-color-tertiary: #000000;
    --foreground-color-white: #ffffff;
    --foreground-color-neutral: #999999;
    --foreground-color-accent: #44d62c;
    --background-color-default: #f4f4f4;
    --background-color-muted: #ffffff;
    --background-color-inset: #ffffff;
    --background-color-tertiary: #e6e6e6;
    --background-color-tertiary: #e6e6e6;
    --background-color-tertiary-muted: #f2f2f2;
    --background-color-tertiary-emphasis: #ffffff;
    --background-color-neutral: #888888;
    --background-color-neutral-muted: #ababab;
    --background-color-neutral-emphasis: #5f5f5f;
    --background-color-accent: #44d62c;
    --background-color-accent-muted: #7ce26b;
    --background-color-accent-emphasis: #30961f;
    --background-color-danger: #c83200;
    --background-color-danger-emphasis: #bd4444;
    --background-color-disabled: #dcdcdc;
    --background-color-scroll: #cccccc;
    --border-color-default: #c7c7c7;
    --border-color-muted: #d7d7d7;
    --border-color-neutral: #6d6d6d;
    --border-color-neutral-muted: #343434;
    --border-color-neutral-muted-emphasis: #252525;
    --border-color-accent: #37ab24;
    --border-color-accent-muted: #54b844;
    --border-color-accent-emphasis: #133b0d;
    --border-color-danger: #9d533a;
    --border-color-danger-emphasis: #3c2525;
    --overlay-color-default: rgba(0, 0, 0, 0.75);
}

@media (prefers-color-scheme: light) {
    [data-theme=system] {
        --foreground-color-default: #212121;
        --foreground-color-muted: #69696c;
        --foreground-color-inset: #ffffff;
        --foreground-color-tertiary: #000000;
        --foreground-color-white: #ffffff;
        --foreground-color-neutral: #999999;
        --foreground-color-accent: #44d62c;
        --background-color-default: #f4f4f4;
        --background-color-muted: #ffffff;
        --background-color-inset: #ffffff;
        --background-color-tertiary: #e6e6e6;
        --background-color-tertiary-muted: #f2f2f2;
        --background-color-tertiary-emphasis: #ffffff;
        --background-color-neutral: #888888;
        --background-color-neutral-muted: #ababab;
        --background-color-neutral-emphasis: #5f5f5f;
        --background-color-accent: #44d62c;
        --background-color-accent-muted: #7ce26b;
        --background-color-accent-emphasis: #30961f;
        --background-color-danger: #c83200;
        --background-color-danger-emphasis: #bd4444;
        --background-color-disabled: #dcdcdc;
        --background-color-scroll: #cccccc;
        --border-color-default: #c7c7c7;
        --border-color-muted: #d7d7d7;
        --border-color-neutral: #6d6d6d;
        --border-color-neutral-muted: #343434;
        --border-color-neutral-muted-emphasis: #252525;
        --border-color-accent: #37ab24;
        --border-color-accent-muted: #54b844;
        --border-color-accent-emphasis: #133b0d;
        --border-color-danger: #9d533a;
        --border-color-danger-emphasis: #3c2525;
        --overlay-color-default: rgba(0, 0, 0, 0.75);
    }
}

[data-theme=dark] {
    --foreground-color-default: #cccccc;
    --foreground-color-muted: #999999;
    --foreground-color-inset: #000000;
    --foreground-color-tertiary: #ffffff;
    --foreground-color-white: #ffffff;
    --foreground-color-neutral: #999999;
    --foreground-color-accent: #44d62c;
    --background-color-default: #222222;
    --background-color-muted: #111111;
    --background-color-inset: #000000;
    --background-color-tertiary: #2b2b2b;
    --background-color-tertiary-muted: #272727;
    --background-color-tertiary-emphasis: #222222;
    --background-color-neutral: #555555;
    --background-color-neutral-muted: #888888;
    --background-color-neutral-emphasis: #3c3c3c;
    --background-color-accent: #44d62c;
    --background-color-accent-muted: #7ce26b;
    --background-color-accent-emphasis: #30961f;
    --background-color-danger: #c83200;
    --background-color-danger-emphasis: #a42b2b;
    --background-color-disabled: #313131;
    --background-color-scroll: #4e4e4e;
    --border-color-default: #111111;
    --border-color-muted: #5a5a5a;
    --border-color-neutral: #1b1b1b;
    --border-color-neutral-muted: #262626;
    --border-color-neutral-muted-emphasis: #171717;
    --border-color-accent: #36aa23;
    --border-color-accent-muted: #54b744;
    --border-color-accent-emphasis: #123a0c;
    --border-color-danger: #843b22;
    --border-color-danger-emphasis: #2c1414;
    --overlay-color-default: rgba(0, 0, 0, 0.75);
}

@media (prefers-color-scheme: dark) {
    [data-theme=system] {
        --foreground-color-default: #cccccc;
        --foreground-color-muted: #999999;
        --foreground-color-inset: #000000;
        --foreground-color-tertiary: #ffffff;
        --foreground-color-white: #ffffff;
        --foreground-color-neutral: #999999;
        --foreground-color-accent: #44d62c;
        --background-color-default: #222222;
        --background-color-muted: #111111;
        --background-color-inset: #000000;
        --background-color-tertiary: #2b2b2b;
        --background-color-tertiary-muted: #272727;
        --background-color-tertiary-emphasis: #222222;
        --background-color-neutral: #555555;
        --background-color-neutral-muted: #888888;
        --background-color-neutral-emphasis: #3c3c3c;
        --background-color-accent: #44d62c;
        --background-color-accent-muted: #7ce26b;
        --background-color-accent-emphasis: #30961f;
        --background-color-danger: #c83200;
        --background-color-danger-emphasis: #a42b2b;
        --background-color-disabled: #313131;
        --background-color-scroll: #4e4e4e;
        --border-color-default: #111111;
        --border-color-muted: #5a5a5a;
        --border-color-neutral: #1b1b1b;
        --border-color-neutral-muted: #262626;
        --border-color-neutral-muted-emphasis: #171717;
        --border-color-accent: #36aa23;
        --border-color-accent-muted: #54b744;
        --border-color-accent-emphasis: #123a0c;
        --border-color-danger: #843b22;
        --border-color-danger-emphasis: #2c1414;
        --overlay-color-default: rgba(0, 0, 0, 0.75);
    }
}

[data-theme] {
    --font-family-sans-serif: Roboto, system-ui, sans-serif, Segoe UI, Segoe UI Emoji, Segoe UI Symbol;
    --font-family-monospace: Roboto Mono, Consolas, monospace, Segoe UI, Segoe UI Emoji, Segoe UI Symbol;
    --font-size: 12px;
    --font-size-sm: 11px;
    --font-size-md: 14px;
    --font-size-xl: 32px;
    --font-weight: 400;
    --font-weight-light: 300;
    --font-weight-semibold: 600;
    --spacing: 10px;
    --spacing-third: 3.333px;
    --spacing-half: 5px;
    --spacing-double: 20px;
    --spacing-triple: 30px;
    --spacing-quad: 40px;
    --border-radius: 0px;
    --base-border: 1px solid var(--border-color-default);
    --muted-border: 1px solid var(--border-color-muted);
    --accent-border: 1px solid var(--border-color-accent);
    --foldout-z-index: 17;
}

:root,
[data-theme=light] {
    color-scheme: light;
}

@media (prefers-color-scheme: light) {
    [data-theme=system] {
        color-scheme: light;
    }
}

[data-theme=dark] {
    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    [data-theme=system] {
        color-scheme: dark;
    }
}

[data-theme] {
    color: var(--foreground-color-default);
    background-color: var(--background-color-default);
}

html {
    box-sizing: border-box;
}

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

html,
body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

html {
    font-size: var(--font-size);
    position: relative;
}

body {
    font-family: var(--font-family-sans-serif);
    font-size: var(--font-size);
    line-height: 1.5;
    color: var(--foreground-color-default);
    background-color: var(--background-color-default);
}

:not(input, textarea),
:not(input, textarea)::after,
:not(input, textarea)::before {
    user-select: none;
    cursor: default;
}

img {
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

code,
pre {
    font-family: var(--font-family-monospace);
}

button {
    -webkit-app-region: no-drag;
}

:focus {
    outline: none;
}

:focus-visible {
    outline: dashed 1px var(--background-color-accent);
}

kbd {
    border-radius: var(--border-radius);
    border: var(--muted-border);
    display: inline-block;
    padding: 1px 2px;
    line-height: 1;
    min-height: 16px;
    font-family: var(--font-family-monospace);
    text-align: center;
    min-width: 1.5em;
}

a {
    color: var(--foreground-color-default);
    text-decoration: underline;
    cursor: pointer;
}

    a:hover {
        color: var(--foreground-color-accent);
    }

input {
    accent-color: var(--background-color-accent);
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background: transparent;
    cursor: pointer;
}

::-webkit-scrollbar-thumb {
    background-color: var(--background-color-scroll);
    border-radius: 5px;
    border-color: transparent;
    border-style: solid;
    border-width: 2px;
    background-clip: padding-box;
}

    ::-webkit-scrollbar-thumb:hover,
    ::-webkit-scrollbar-thumb:active {
        background-color: var(--background-color-accent);
        cursor: pointer;
    }

::-webkit-scrollbar-corner {
    background: rgba(0,0,0,0);
}

.selectable-text {
    user-select: text;
    cursor: auto;
}

#app {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    border-top: var(--base-border);
}

    #blazor-error-ui .banner {
        height: 30px;
        position: relative;
        display: flex;
        flex-wrap: nowrap;
        overflow: hidden;
        align-items: center;
        justify-content: space-between;
        padding-left: var(--spacing);
    }

        #blazor-error-ui .banner .contents {
            display: flex;
            flex-wrap: nowrap;
            justify-content: left;
            align-items: center;
        }

            #blazor-error-ui .banner .contents svg {
                margin-right: var(--spacing);
                fill: currentColor;
                flex-shrink: 0;
                color: #cb2431;
            }

            #blazor-error-ui .banner .contents span a {
                display: inline-flex;
                align-items: center;
            }

        #blazor-error-ui .banner .close {
            display: flex;
            flex-shrink: 0;
            flex-grow: 0;
            margin-right: var(--spacing);
            margin-left: var(--spacing);
        }

            #blazor-error-ui .banner .close button {
                width: 16px;
                height: 16px;
                border: 0;
                padding: 0;
                color: var(--foreground-color-muted);
                background: transparent;
            }

            #blazor-error-ui .banner .close button {
                width: 16px;
                height: 16px;
                border: 0;
                padding: 0;
                color: var(--foreground-color-muted);
                background: transparent;
            }

                #blazor-error-ui .banner .close button svg {
                    fill: currentColor;
                    flex-shrink: 0;
                }
