/* BEGIN VARIABLES */
:root, :root.light {
    --light-bg-color-1: #ffffff;
    --light-bg-color-2: #fcfcfd;
    --light-bg-color-3: #f8f9fa;
    --light-border-color: rgba(0, 0, 0, 0.071);
    --light-heading-color: #212529;
    --light-text-color: #111111;
    --light-faded-text-color: #8a8a8a;
    --light-annotation-color: #b15422;
    --light-keyword-color: #030303;
    --light-name-color: #b12250;
    --light-type-color: #3061c4;
    --light-kind-color: #8a8a8a;
    --light-effect-color: #d4671e;
    --light-doc-code-color: #d63384;
    --light-show-hide-color: #0d6efd;
    --light-show-hide-hover-color: #0a58ca;
    --light-module-color: #a0a5ff;
    --light-signature-color: #dfa0ff;
    --light-trait-def-color: #bfb280;
    --light-traits-color: #fc9d9a;
    --light-enum-color: #c8c8a9;
    --light-op-color: #ccaeff;
    --light-eff-color: #ffaefa;
    --light-type-alias-color: #f9cdad;
    --light-def-color: #83af9b;
    --light-shadow-color: rgba(0, 0, 0, 0.05);
    --light-highlight-color: rgba(0, 0, 0, 0.3);

    --dark-bg-color-1: #151719;
    --dark-bg-color-2: #101214;
    --dark-bg-color-3: #0e0f11;
    --dark-border-color: rgba(255, 255, 255, 0.07);
    --dark-heading-color: #e6e6e6;
    --dark-text-color: #f7f7f7;
    --dark-faded-text-color: #8a8a8a;
    --dark-annotation-color: #e7a37e;
    --dark-keyword-color: #fcfcfc;
    --dark-name-color: #ff6696;
    --dark-type-color: #6699ff;
    --dark-kind-color: #999999;
    --dark-effect-color: #ff944d;
    --dark-doc-code-color: #ff66b3;
    --dark-show-hide-color: #68a4fd;
    --dark-show-hide-hover-color: #3c86f6;
    --dark-module-color: #a0a5ff;
    --dark-signature-color: #dfa0ff;
    --dark-trait-def-color: #bfb280;
    --dark-traits-color: #fc9d9a;
    --dark-enum-color: #c8c8a9;
    --dark-op-color: #ccaeff;
    --dark-eff-color: #ffaefa;
    --dark-type-alias-color: #f9cdad;
    --dark-def-color: #83af9b;
    --dark-shadow-color: rgba(0, 0, 0, 0.3);
    --dark-highlight-color: hsla(50, 0%, 100%, 0.3);

    --bg-color-1: var(--light-bg-color-1);
    --bg-color-2: var(--light-bg-color-2);
    --bg-color-3: var(--light-bg-color-3);
    --border-color: var(--light-border-color);
    --heading-color: var(--light-heading-color);
    --text-color: var(--light-text-color);
    --faded-text-color: var(--light-faded-text-color);
    --annotation-color: var(--light-annotation-color);
    --keyword-color: var(--light-keyword-color);
    --name-color: var(--light-name-color);
    --type-color: var(--light-type-color);
    --kind-color: var(--light-kind-color);
    --effect-color: var(--light-effect-color);
    --doc-code-color: var(--light-doc-code-color);
    --show-hide-color: var(--light-show-hide-color);
    --show-hide-hover-color: var(--light-show-hide-hover-color);
    --module-color: var(--light-module-color);
    --signature-color: var(--light-signature-color);
    --trait-def-color: var(--light-trait-def-color);
    --traits-color: var(--light-traits-color);
    --enum-color: var(--light-enum-color);
    --op-color: var(--light-op-color);
    --eff-color: var(--light-eff-color);
    --type-alias-color: var(--light-type-alias-color);
    --def-color: var(--light-def-color);
    --shadow-color: var(--light-shadow-color);
    --highlight-color: var(--light-highlight-color);
    color-scheme: light;

    --border: 1px solid var(--border-color);
    --blur-transition: filter 0.3s;
}
@media (prefers-color-scheme: dark) {
    :root {
        --bg-color-1: var(--dark-bg-color-1);
        --bg-color-2: var(--dark-bg-color-2);
        --bg-color-3: var(--dark-bg-color-3);
        --border-color: var(--dark-border-color);
        --heading-color: var(--dark-heading-color);
        --text-color: var(--dark-text-color);
        --faded-text-color: var(--dark-faded-text-color);
        --annotation-color: var(--dark-annotation-color);
        --keyword-color: var(--dark-keyword-color);
        --name-color: var(--dark-name-color);
        --type-color: var(--dark-type-color);
        --kind-color: var(--dark-kind-color);
        --effect-color: var(--dark-effect-color);
        --doc-code-color: var(--dark-doc-code-color);
        --show-hide-color: var(--dark-show-hide-color);
        --show-hide-hover-color: var(--dark-show-hide-hover-color);
        --module-color: var(--dark-module-color);
        --signature-color: var(--dark-signature-color);
        --trait-def-color: var(--dark-trait-def-color);
        --traits-color: var(--dark-traits-color);
        --enum-color: var(--dark-enum-color);
        --op-color: var(--dark-op-color);
        --eff-color: var(--dark-eff-color);
        --type-alias-color: var(--dark-type-alias-color);
        --def-color: var(--dark-def-color);
        --shadow-color: var(--dark-shadow-color);
        --highlight-color: var(--dark-highlight-color);
        color-scheme: dark;
    }
}
:root.dark {
    --bg-color-1: var(--dark-bg-color-1);
    --bg-color-2: var(--dark-bg-color-2);
    --bg-color-3: var(--dark-bg-color-3);
    --border-color: var(--dark-border-color);
    --heading-color: var(--dark-heading-color);
    --text-color: var(--dark-text-color);
    --faded-text-color: var(--dark-faded-text-color);
    --annotation-color: var(--dark-annotation-color);
    --keyword-color: var(--dark-keyword-color);
    --name-color: var(--dark-name-color);
    --type-color: var(--dark-type-color);
    --kind-color: var(--dark-kind-color);
    --effect-color: var(--dark-effect-color);
    --doc-code-color: var(--dark-doc-code-color);
    --show-hide-color: var(--dark-show-hide-color);
    --show-hide-hover-color: var(--dark-show-hide-hover-color);
    --module-color: var(--dark-module-color);
    --signature-color: var(--dark-signature-color);
    --trait-def-color: var(--dark-trait-def-color);
    --traits-color: var(--dark-traits-color);
    --enum-color: var(--dark-enum-color);
    --op-color: var(--dark-op-color);
    --eff-color: var(--dark-eff-color);
    --type-alias-color: var(--dark-type-alias-color);
    --def-color: var(--dark-def-color);
    --shadow-color: var(--dark-shadow-color);
    --highlight-color: var(--dark-highlight-color);
    color-scheme: dark;
}
/* END VARIABLES */



/* BEGIN GLOBAL STYLES */
* {
    box-sizing: border-box;

    /* When overriding this property, make sure to include this transition */
    transition: var(--blur-transition);
}

html, body {
    min-height: 100dvh;
    margin: 0;
    padding: 0;
}

h1, h2 {
    color: var(--heading-color);
    margin-top: 0;
    line-height: 1.2;
}

h1 {
    font-family: "Oswald", sans-serif;
    font-size: 4.5rem;
    font-weight: 300;
    margin-bottom: 3rem;
}

h2 {
    font-family: "Oswald", sans-serif;
    font-size: 2rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
}

h3 {
    display: inline;
    font-family: "Inter", sans-serif;
    font-size: 0.9rem;
    font-weight: 200;
    color: var(--heading-color);
}

a {
    color: var(--text-color);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

button, input {
    background-color: transparent;
    border: none;
    font-family: inherit;
    font-size: inherit;
}
button, input[type="checkbox"] {
    cursor: pointer;
}

::placeholder {
    color: var(--faded-text-color);
    opacity: 1;
}

kbd {
    border: var(--border);
    border-radius: 0.2em;
    padding: 0 0.25em;
    background-color: var(--bg-color-1);
}

@media screen and (max-width: 800px) {
    .keyboard-shortcut {
        display: none;
    }
}

@media (prefers-reduced-motion) {
    * {
        transition: none !important;
        animation: none !important;
    }
}
/* END GLOBAL STYLES */



body {
    display: grid;
    --header-height: 2.8rem;
    grid-template-areas:
        "header header"
        "nav main";
    grid-template-columns: auto 1fr;
    grid-template-rows: var(--header-height) 1fr;


    font-family: "Noto Sans", sans-serif;
    color: var(--text-color);
}
@media screen and (max-width: 800px) {
    body {
        display: block;
    }
}

header {
    grid-area: header;
    position: sticky;
    top: 0;

    display: flex;
    gap: 0.5rem;
    background-color: var(--bg-color-1);
    box-shadow: 0 0 10px 0 var(--shadow-color);
    border-bottom: var(--border);
    padding: 0.5rem 1rem;
    z-index: 2; /* Cast shadows to the top layer */
}
@media screen and (max-width: 800px) {
    header {
        position: fixed;
        top: unset;
        bottom: 0;
        width: 100dvw;

        border-bottom: none;
        border-top: var(--border);
    }
}

.flix {
    display: flex;
    gap: 0.3rem;
    align-items: baseline;
}
.flix > h2 {
    font-weight: 700;
    display: inline-block;
    margin-bottom: 0;
    font-size: 1.5rem;
}
.flix > .version {
    color: var(--faded-text-color);
    font-size: 0.7rem;
}

header > .spacer {
    width: 100%;
}

header .icon svg {
    /* Get rid of weird padding on the icon */
    display: block;
}

header > .toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--faded-text-color);
}
header > .toggle:hover {
    color: var(--text-color)
}

.no-script #theme-toggle .light.icon,
:root.light #theme-toggle .light.icon {
    display: none;
}
@media (prefers-color-scheme: dark) {
    .no-script #theme-toggle .dark.icon {
        display: none;
    }
}
:root.dark #theme-toggle .dark.icon {
    display: none;
}

#menu-toggle {
    display: none;
    position: relative;
}
#menu-toggle > input {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
}
#menu-toggle:has(input:checked) > .open.icon {
    display: none;
}
#menu-toggle:has(input:not(:checked)) > .close.icon {
    display: none;
}
@media screen and (max-width: 800px) {
    #menu-toggle {
        display: flex;
    }
}

nav {
    grid-area: nav;

    position: sticky;
    top: var(--header-height);
    height: calc(100dvh - var(--header-height));

    background-color: var(--bg-color-1);
    box-shadow: 0 0 10px 0 var(--shadow-color);
    border-right: var(--border);
    box-sizing: border-box;
    padding: 0.5rem 1rem;
    width: 20rem;
    overflow-y: auto;
    z-index: 1;
}
@media screen and (max-width: 800px) {
    nav {
        position: fixed;
        top: 20%;
        width: 100%;
        bottom: 0;
        border: none;
        background-color: var(--bg-color-1);
        border-radius: 0.5rem;
        box-shadow: 0 0 10px 0 var(--shadow-color);
        border-top: var(--border);
        padding-bottom: 3rem;

        transform: translateY(100%);
        transition: transform 0.2s, var(--blur-transition);
    }
    :root:has(#menu-toggle input:checked) nav {
        transform: translateY(0);
    }
}
nav > .back {
    display: flex;
    gap: 0.1rem;
    margin-bottom: 1rem;
}
nav ul {
    margin-top: 0.2rem;
    padding-left: 0.5rem;
    font-family: "Inter", sans-serif;
    font-size: 13px;
    list-style: none;
}
nav li {
    margin-bottom: 0.1rem;
}
nav li::before {
    content: "●";
    margin-right: 0.3rem;
}
nav .Modules li::before {
    color: var(--module-color);
}
nav .Signatures li::before {
    color: var(--signature-color);
}
nav .Trait-Definitions li::before {
    color: var(--trait-def-color);
}
nav .Traits li::before {
    color: var(--traits-color);
}
nav .Enums li::before {
    color: var(--enum-color);
}
nav .Operations li::before {
    color: var(--op-color);
}
nav .Effects li::before {
    color: var(--eff-color);
}
nav .Type-Aliases li::before {
    color: var(--type-alias-color);
}
nav .Definitions li::before,
nav .Module-Definitions li::before {
    color: var(--def-color);
}

main {
    grid-area: main;

    padding: 1rem 10%;
    overflow-y: auto;
    scroll-behavior: smooth;
    background-color: var(--bg-color-2);
}
@media screen and (max-width: 800px) {
    main {
        padding: 1rem 5%;
        min-height: 100dvh;
    }
    :root:has(#menu-toggle input:checked) main {
        filter: blur(10px) contrast(0.8);
        pointer-events: none;
    }
}

main h2 {
    font-family: "Oswald", sans-serif;
}

.box {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    margin-left: -0.75rem;
    margin-right: -0.75rem;

    box-shadow: 0 0 10px 0 var(--shadow-color);
    background-color: var(--bg-color-1);
    border: var(--border);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    margin-bottom: 0.8rem;
    border-radius: 0.2rem;
    box-sizing: border-box;
    overflow: auto;
}
.box:last-of-type {
    margin-bottom: 3rem;
}
.box:target {
    box-shadow: 0 0 14px 0 var(--highlight-color);
}
.box code {
    font-size: 0.85rem;
}

.subsection {
    margin-top: 1rem;
    padding-left: 1.5rem;
}
.subsection h3 {
    margin-left: -1.5rem;
}
.subsection > summary {
    cursor: pointer;
    list-style: none;
}
.subsection > summary::after {
    content: "(show)";
    font-size: 0.875em;
    margin-left: 0.3rem;
    color: var(--show-hide-color);
}
.subsection > summary:hover::after {
    text-decoration: underline;
    color: var(--show-hide-hover-color);
}
.subsection[open] > summary::after {
    content: "(hide)";
}

.subsection > div {
    padding: 0.5rem 0;
}
.subsection > div:not(:last-child) {
    border-bottom: var(--border);
}

.decl {
    display: flex;
    gap: 0.2rem;
    align-items: center;
}
.decl > code {
    flex: 1;
}
.decl > * {
    height: fit-content;
}

.actions {
    float: right;
    display: flex;
    gap: 0.2rem;
    color: var(--faded-text-color);
}

.actions > * {
    color: inherit;
    font-family: "Inter", sans-serif;
    font-size: 0.75rem;
    text-decoration: none;
    background-color: var(--bg-color-3);
    padding: 0.2em 0.65em;
    border-radius: 0.375rem;
    border: var(--border);
}
.actions > *:hover {
    color: var(--text-color);
}

.actions > .copy-link {
    text-decoration: none;
    height: 1.4rem;
    padding: 0.2em;
}
.actions > .copy-link svg {
    width: 1rem;
    height: 1rem;
}

.copy-link-msg {
    font-size: 0.8rem;
    background-color:var(--shadow-color);
    padding: 0.1rem 0.4rem;
    border-radius: 0.2rem;
    pointer-events: none;

    animation: fade-out 1s ease-in;
}
@keyframes fade-out {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateY(-20px);
    }
}

.cases {
    margin-left: 1rem;
    margin-top: 0.7rem;
    margin-bottom: 0.7rem;
}
.cases > code {
    display: block;
}
.case-tag {
    font-style: italic;
    margin-right: 0.1em;
}

.doc {
    margin-left: 1rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;

    font-size: 0.8rem;
}
.doc p {
    margin-top: 0;
    margin-bottom: 1rem;
}
.doc p:last-child {
    margin-bottom: 0;
}
.box .doc code {
    color: var(--doc-code-color);
}

code {
    font-family: "Fira Code", monospace;
}
code a {
    color: inherit;
    text-decoration: inherit;
}
code.annotations {
    display: block;
}
code .annotation {
    color: var(--annotation-color);
}
code .keyword {
    color: var(--keyword-color);
}
code .name {
    color: var(--name-color);
}
code .type {
    color: var(--type-color);
}
code .kind {
    color: var(--kind-color);
}
code .effect {
    color: var(--effect-color);
}
code .tpe-constraint {
    text-decoration: underline;
}
