/* Komps JSDoc Theme Overrides */

:root {
    --primary-hue: 151;
    --muted-hue: 164;
    
    --green: hsl(var(--primary-hue), 100%, 39%);
    --green-10: #e6faf0;
    --blue: oklch(64.11% 0.1544 243.43);
    --orange: #ffad00;
    --midnight: #415190;
    --dusk: #677395;
    --dusk-50: hsl(220, 20%, 60%);
    --dusk-60: hsl(220, 15%, 50%);
    --dusk-70: hsl(220, 25%, 40%);
    --dusk-80: hsl(220, 35%, 30%);
    --dusk-90: hsl(220, 55%, 20%);
    
    --nav-bg: oklch(99% 0.012 var(--muted-hue));
    --nav-border: transparent;
    --nav-link-color: var(--dusk-80);
    
    --code-bg: oklch(97% 0.03 var(--muted-hue));
    --code-color: oklch(50% 50% var(--code-hue));
    
}

html, body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    line-height: 1.5;
    font-size: 14px;
    color: var(--dusk-70);
}

h1 {
    color: var(--dusk-90);
}

h2 {
    font-weight: 500;
}

/* Nav icons */
body nav {
    flex: 0 0 max-content;
    max-width: inherit;
    font-size: 1.2em;
    padding-inline: 0;
    padding-block: 2em;
    text-decoration: none;
    align-items: stretch;
    min-width: 260px;
    
    .brand {
        width: 150px;
        align-self: center;
    }
    
    .nav-hr {
        border-top: 1px solid var(--dusk-50);
        width: 75%;
        align-self: center;
        opacity: 0.5;
    }

    .nav-item {
        min-width: max-content;
        padding-left: 1em;
        border-left: 0.5em solid transparent;
        gap: 1em;
        svg {
            flex: 0 0 auto;
            color: var(--dusk-50);
            stroke-width: 1;
        }
        span {
            padding-block: 0.5em;
        }
        &:hover {
            color: var(--dusk-70);
            text-decoration: none;
            border-left-color: var(--blue);
            svg {
                color: var(--blue);
            }
        }
        &.active {
            color: var(--dusk-70);
            background: oklch(94% 0.046 var(--muted-hue));
            border-left-color: var(--green);
            svg {
                color: var(--green);
            }
        }
    }
    
    footer {
        font-size: 0.7em;
        padding-inline: 2em;
        text-align: center;
    }
}

.content {
    & > .doc {
        & > header {
            margin-top: 4em;
            h1 {
                display: flex;
                align-items: center;
                gap: 0.25em;
                font-size: 2em;
                svg {
                    color: var(--green);
                    width: 64px;
                    height: 64px;
                    stroke-width: 1.25;
                    margin-right: 0.5em;
                }
            }
            .signature {
                .signature-extends, 
                .signature-augments {
                    font-size: 0.8em;
                    color: var(--dusk-50);
                    font-weight: 300;
                    a {
                        color: var(--dusk-50);
                    }
                }
            }
        }
        & > .description {
            & > p:first-of-type {
                font-size: 1.4em;
                font-weight: 300;
            }
        }
    }
}

/* Demo iframe */
.demo-frame {
    width: 100%;
    height: 300px;
    border: 1px solid oklch(90% 0.01 var(--muted-hue));
    border-radius: 0.5em;
    background: white;
}

.symbol-title {
    code {
        color: var(--dusk-90);
        font-weight: 700;
    }
}