@import url('google-sans/stylesheet.css');

:root {
    --font: 'Google Sans', Roboto, 'Open Sans', Helvetica, system-ui;
    --md-sys-typescale-body-large-font: var(--font);
    --md-sys-typescale-body-small-font: var(--font);
    --md-ref-typeface-plain: var(--font);

    --code-light-color: #1c1c1c;
    --code-light-bg-color: #e6e5e5;

    --code-dark-color: #c5c5c5;
    --code-dark-bg-color: #1b1b1b;
}

*, *:before, *:after, *::placeholder, :host {
    font-family: var(--font), sans-serif;
    animation-fill-mode: forwards !important;
    /* transition-duration: 1s, 1s !important;
    transition-property: background-color, color !important;
    transition-timing-function: ease-in-out, ease-in-out !important; */
    box-sizing: border-box;
    resize: none;
    /* transition-property: background-color, color;
    transition-duration: 0.5s;
    transition-timing-function: ease-in-out; */
}

html, body {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100vh;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: white;
}

iframe {
    border: none;
}

.buttons {
    display: flex;
    align-items: center;
    gap: 5px;
}

.p {
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0;
    margin-inline-end: 0;
    width: 100%;
}

.tip {
    display: none;
    color: #929292;
    width: 100%;
    height: 100%;
    overflow: hidden;
    text-align: center;
    vertical-align: middle;
    align-items: center;
    padding: 10px;
    margin: 0;
    word-wrap: break-word;
}

.tip:only-child {
    display: flex;
}

html[data-tips="false"] .tip {
    display: none !important;
}

pre {
    margin: 10px;
    background-color: var(--code-light-bg-color);
    border-radius: 5px;
    padding: 5px;
    color: var(--code-light-color);
    font-family: monospace;
    overflow: auto !important;
    text-align: left !important;
    position: relative;

    md-fab {
        position: absolute;
        bottom: 10px;
        right: 10px;
    }

    span {
        font-family: inherit;
    }

    .syntax-property {
        color: #892ca6;
        font-style: italic;
    }

    .syntax-string {
        color: #255315;
    }
}

pre[data-no-copy] > md-fab {
    display: none;
}

md-dialog > div[slot="content"] > pre {
    --code-dark-bg-color: #2d2d2d;
    --code-light-bg-color: #dfdfdf;
}

code {
    background-color: var(--code-light-bg-color);
    color: var(--code-light-color);
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 5px;
    font-family: monospace;
}

.images {
    width: 100%;
    height: 300px;
    display: flex;
    flex-direction: row;
    max-width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    gap: 5px;

    img {
        flex: 1;
        height: 100%;
        max-width: 100%;
        width: 0;
        object-fit: cover;
        object-position: center;
        transition: width 0.5s ease-in-out;
    }

    img:first-child {
        object-position: left;
    }

    img:last-child {
        object-position: right;
    }

    img:hover {
        width: 90%;
    }
}

.note {
    color: #515151;
    font-style: italic;
    justify-self: left;
    width: 100%;
    text-align: left;
    display: block;
}

.note::before {
    content: '* ';
    font-style: inherit;
    color: inherit;
}

/* code-snippet {
    white-space: pre-wrap;
    margin: 10px;
    background-color: var(--code-light-bg-color);
    border-radius: 5px;
    padding: 5px;
    color: var(--code-light-color);
    font-family: monospace;
    overflow: auto !important;
    text-align: left !important;

    * {
        font-family: inherit;
    }

    .syntax-property {
        color: #892ca6;
        font-style: italic;
    }

    .syntax-string {
        color: #255315;
    }
} */

#invalidJSON > div[slot="content"] > #invalidJSONError {
    height: 200px;
    white-space: pre-wrap;
    margin: 10px 0 10px 0;
}

html[data-theme="dark"] {
    body {
        --md-sys-color-surface: #010800;
        --md-sys-color-on-surface: #e2e4df;
        --md-sys-color-on-surface-variant: #b6bab0;
        /* --md-sys-color-primary: #9973ff; */
        --md-dialog-container-color: #1d1d1d;
        --md-sys-color-secondary-container: #494967;
        --md-sys-color-on-secondary-container: white;
        --md-sys-color-error: #e61d11;
        --md-sys-color-surface-container-high: #1f1f1f;
        --md-list-container-color: #080808;
        --md-sys-color-surface-container-highest: #1c1c1c;
        --md-sys-color-surface-container: #252525;
        background-color: black;
        color: white;
        color-scheme: dark;
    }

    pre {
        background-color: var(--code-dark-bg-color);
        color: var(--code-dark-color);

        .syntax-property {
            color: #d166b7;
        }

        .syntax-string {
            color: #3f9327;
        }
    }

    /* code-snippet {
        background-color: var(--code-dark-bg-color);
        color: var(--code-dark-color);

        .syntax-property {
            color: #d166b7;
        }

        .syntax-string {
            color: #3f9327;
        }
    } */

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

@keyframes itemAppear {
    0% {
        opacity: 0;
        transform: translateX(-100%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes itemDisappear {
    0% {
        opacity: 1;
        transform: translateX(0) translateY(0);
        height: 72px;
    }


    100% {
        transform: translateX(-100%) /* translateY(calc(72px / 2)) */;
        opacity: 0;
        height: 0;
    }
}