:root {
    --monospace-font: "Fira Code", monospace;
    --system-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    --heading-font-family: var(--system-font);

    --spacing-50: 4px;
    --spacing-100: 8px;
    --spacing-200: 12px;
    --spacing-300: 16px;
    --spacing-400: 24px;
    --spacing-500: 32px;
    --spacing-600: 48px;
    --spacing-700: 64px;
    --spacing-800: 96px;
    --spacing-900: 128px;
    --spacing-950: 192px;

    --font-50: 12px;
    --font-100: 14px;
    --font-200: 16px;
    --font-300: 18px;
    --font-400: 20px;
    --font-500: 24px;
    --font-600: 30px;
    --font-700: 36px;
    --font-800: 48px;
    --font-900: 60px;
    --font-950: 72px;

    --line-height: 1.5;
    --heading-line-height: 1.25;
    --radius: 6px;

    --container-sm: 768px;
    --container-md: 960px;
    --container-lg: 1024px;
    --container-xl: 1200px;
    --container-xxl: 1400px;
    --container-xxxl: 1800px;
    --main-menu-width: 260px;
    --page-menu-width: var(--main-menu-width);
    --header-height: 60px;
    --body-grid-template-columns: var(--main-menu-width) minmax(0, 1fr);
    --body-grid-template-columns-xl: var(--main-menu-width) minmax(0, 1fr) var(--page-menu-width);
    --main-menu-grid-row: 2;
    --main-menu-grid-column: 1;
    --main-grid-row: 2;
    --main-grid-column: 2;
    --dialog-width: 500px;
    --api-docs-first-column-min-width: 320px;
    --api-docs-second-column-min-width: 240px;

    /* light theme */
    --primary: #1e8bc3;
    --background: #f5f5f6;
    --text-color: #020202;
    --text-hover: #282828;
    --heading-color: #2e293a;
    --code-background: #ffffff;
    --code-color: #1a4b0b;
    --header-background: #f9fbfc;
    --header-border: #e8ecf1;
    --header-link-color: var(--text-color);
    --mobile-menu-background: var(--header-background);
    --menu-color: var(--text-color);
    --menu-item-hover-background: #eff0f1;
    --menu-item-hover-color: var(--menu-color);
    --doc-tip-background: #F7F7F7;
    --link-color: #4871f7;
    --link-hover: #91aafa;
    --search-background: rgb(229, 231, 235);
    --nav-category: rgb(156, 163, 175);
    --scrollbar-track-background: #424242;
    --scrollbar-track-border: #4A4A4A;
    --scrollbar-thumb-background: #686868;
    --shadow-color: hsla(0, 0%, 0%, .1);
    --main-shadow-color: hsla(0, 0%, 0%, .025);
    --aside-background: var(--header-background);
    --blockquote-bacground-color: var(--header-background);
    --blockquote-color: var(--text-color);
    --on-this-page-color: var(--menu-color);
    --page-menu-background-color: var(--header-background);
    --page-menu-background-border-color: var(--header-border);
    --page-menu-background-hover-border-color: var(--text-color);
    --nav-item-border-color: var(--header-border);
    --nav-item-active-border-color: var(--text-color);
    --dialog-background-color: var(--header-background);
    --dialog-empty-color: var(--nav-category);
    --dialog-icon-color: var(--text-color);
    --dialog-link-color: var(--link-color);
    --dialog-link-hover-color: var(--header-background);
    --dialog-link-hover-background-color: var(--link-hover);
    --code-fence-border-color: transparent;

    --header-brand-text-transform: none;

    --code-strings-color: #0093A1;
    --code-printf-color: #6B2FBA;
    --code-escaped-color: #EA8675;
    --code-identifiers-color: #6B2FBA;
    --code-module-color: #009999;
    --code-reference-color: #4974D1;
    --code-value-color: #1B6600;
    --code-interface-color: #43AEC6;
    --code-typearg-color: #43AEC6;
    --code-disposable-color: #43AEC6;
    --code-property-color: #43AEC6;
    --code-punctuation-color: #43AEC6;
    --code-punctuation2-color: var(--text-color);
    --code-function-color: #6B2FBA;
    --code-function2-color: #6B2FBA;
    --code-activepattern-color: #4ec9b0;
    --code-unioncase-color: #4ec9b0;
    --code-enumeration-color: #8C6C41;
    --code-keywords-color: #0F54D6;
    --code-comment-color: #707070;
    --code-operators-color: #0F54D6;
    --code-numbers-color: #009999;
    --code-linenumbers-color: #80b0b0;
    --code-mutable-color: #1b6600;
    --code-inactive-color: #808080;
    --code-preprocessor-color: #af75c1;
    --code-fsioutput-color: #808080;
    --code-tooltip-color: #d1d1d1;
}

/* dark theme */

[data-theme=dark] {
    --primary: #81cfe0;
    --background: rgb(20, 21, 26);
    --text-color: #F7F7F7;
    --text-hover: #FFF;
    --heading-color: rgb(229, 231, 235);
    --code-background: #28282D;
    --code-color: #f5f5f6;
    --header-background: #0c1318;
    --header-border: #9b9b9b;
    --menu-item-hover-background: #2c2624;
    --doc-tip-background: #2e293a;
    --link-color: #c5eff7;
    --search-background: #020202;
    --nav-category: rgb(207, 211, 215);
    --code-strings-color: #86b4b9;
    --code-printf-color: #6B2FBA;
    --code-escaped-color: #EA8675;
    --code-identifiers-color: #d1b3f5;
    --code-module-color: #15e1e1;
    --code-reference-color: #40fddd;
    --code-value-color: #ffb4e9;
    --code-interface-color: #43AEC6;
    --code-typearg-color: #43AEC6;
    --code-disposable-color: #6dd6f1;
    --code-property-color: #6acfe7;
    --code-punctuation-color: #43AEC6;
    --code-punctuation2-color: var(--text-color);
    --code-function-color: #6B2FBA;
    --code-function2-color: #cbda9d;
    --code-activepattern-color: #4ec9b0;
    --code-unioncase-color: #4ec9b0;
    --code-enumeration-color: #8C6C41;
    --code-keywords-color: #a7c2f8;
    --code-comment-color: #84d16e;
    --code-operators-color: #b4c6ee;
    --code-numbers-color: #009999;
    --code-linenumbers-color: #80b0b0;
    --code-mutable-color: #1b6600;
    --code-inactive-color: #808080;
    --code-preprocessor-color: #af75c1;
    --code-fsioutput-color: #808080;
    --code-tooltip-color: #d1d1d1;
}

/* CSS Reset, source: https://www.joshwcomeau.com/css/custom-css-reset/ */
*, *::before, *::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

html {
    overflow-y: hidden;
}

body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

input, button, textarea, select {
    font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

/* Main layout */
body {
    font-family: var(--system-font);
    background-color: var(--background);
    color: var(--text-color);
    line-height: var(--line-height);
    scroll-padding-top: var(--header-height);
    scroll-behavior: smooth;
}

header {
    background-color: var(--header-background);
    padding: var(--spacing-300);
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 1px var(--shadow-color);

    & .start {
        display: flex;
        align-items: center;

        & #menu-toggle {
            position: relative;
            height: var(--spacing-500);
            width: var(--spacing-500);
            border: 1px solid var(--header-border);
            border-radius: var(--radius);
            box-shadow: 0 1px 1px var(--shadow-color);

            & .icon {
                top: 4px;
                left: 4px;
                width: calc(var(--spacing-500) - 4px);
                height: calc(var(--spacing-500) - 4px);
                position: absolute;
                color: var(--header-link-color);

                &.open {
                    display: none;
                }
            }

            & input[type=checkbox] {
                position: absolute;
                width: 100%;
                height: 100%;
                left: 0;
                top: 0;
                appearance: none;
                cursor: pointer;
            }

            & .menu {
                visibility: hidden;
                height: 0;
                opacity: 0;
                width: 100%;
                transition: all 0.2s ease-in-out;
                position: fixed;
                top: var(--header-height);
                left: 0;
                background-color: var(--mobile-menu-background);
                list-style: none;
                padding: var(--spacing-300);
                overflow-y: auto;
            }

            & input:checked + .menu {
                visibility: visible;
                opacity: 1;
                height: calc(100vh - var(--header-height));
            }

            &:has(input:checked) {
                .icon.open {
                    display: block;
                }

                .icon.closed {
                    display: none;
                }
            }
        }

        > a {
            display: flex;
            justify-content: center;
            align-items: center;
            text-decoration: none;
            color: var(--header-link-color);
        }

        & img {
            margin: 0 var(--spacing-200);
            border-radius: var(--radius);
            height: calc(var(--spacing-500) - 2px);
        }

        & strong {
            line-height: var(--spacing-500);
            font-size: var(--font-200);
            display: block;
            text-transform: var(--header-brand-text-transform);
            font-weight: 500;
        }
    }

    & .end {
        display: flex;
        align-items: center;

        & a {
            display: none;
            color: var(--header-link-color);
        }

        & > .themeToggle, & > .search {
            cursor: pointer;
            height: var(--spacing-500);
            align-items: center;
            margin: 0 var(--spacing-100);
        }

        & > .search {
            display: flex;
            color: var(--header-link-color);
        }
    }
}

aside {
    display: none;
}

main {
    height: calc(100dvh - var(--header-height));
}

#content {
    padding: var(--spacing-300);

    > *:first-child {
        margin-top: 0;
    }
}

#fsdocs-page-menu {
    display: none;
    padding: var(--spacing-300);
    background-color: var(--page-menu-background-color);
    border-left: 1px solid var(--page-menu-background-border-color);

    &:has(.empty) {
        display: none;
    }

    > #on-this-page {
        font-size: var(--font-100);
        line-height: 1.5;
        color: var(--on-this-page-color);
        font-weight: 500;
        margin: 0 0 var(--spacing-50);
    }

    & ul {
        list-style: none;
        padding: 0;
        margin: 0;

        & li {
            border-left: 1px solid var(--header-border);
            margin: 0;

            &:hover, &:focus {
                border-color: var(--page-menu-background-hover-border-color);
            }

            & a {
                color: var(--menu-color);
                text-decoration: none;
                padding: var(--spacing-50) var(--spacing-100);
                display: block;
                overflow-x: hidden;
                text-overflow: ellipsis;
            }

            &.level-3 {
                padding-left: var(--spacing-100);
            }

            &.level-4 {
                padding-left: var(--spacing-300);
            }
        }
    }
}

/* menu items */
.menu {
    padding: 0;

    & li {
        list-style: none;
        margin: 0;
    }

    .nav-header {
        margin-top: var(--spacing-300);
        text-transform: uppercase;
        font-size: var(--font-200);
        font-weight: 500;
        color: var(--menu-color);
    }
}

.nav-header:first-child {
    margin-top: 0;
}

.nav-item {
    border-left: 1px solid var(--nav-item-border-color);

    & a {
        color: var(--menu-color);
        text-decoration: none;
        font-size: var(--font-200);
        padding: var(--spacing-100);
        display: block;
        overflow-x: hidden;
        text-overflow: ellipsis;

        &:hover {
            background-color: var(--menu-item-hover-background);
            color: var(--menu-item-hover-color);
        }
    }

    &:hover, &.active {
        border-color: var(--nav-item-active-border-color);
    }

    &.active {
        font-weight: 600;
    }
}

@media screen and (min-width: 768px) {
    #menu-toggle {
        display: none;
    }

    body {
        display: grid;
        grid-template-rows: var(--header-height) minmax(0, 1fr);
        grid-template-columns:var(--body-grid-template-columns);
        gap: 0;
    }

    header {
        border-bottom: 1px solid var(--header-border);
        grid-row: 1;
        grid-column: span 2;
        box-shadow: none;

        & .end {
            > a {
                display: flex;
                align-items: center;
                text-decoration: none;

                &:hover {
                    color: var(--link-hover);
                }
            }
        }
    }

    aside, main {
        height: calc(100vh - var(--header-height));
    }

    aside {
        position: sticky;
        top: var(--header-height);
    }

    #fsdocs-main-menu {
        display: block;
        padding: var(--spacing-300) var(--spacing-500);
        background-color: var(--aside-background);
        width: var(--main-menu-width);
        border-right: 1px solid var(--header-border);
        grid-row: var(--main-menu-grid-row);
        grid-column: var(--main-menu-grid-column);
        overflow-y: auto;
    }

    main {
        grid-row: var(--main-grid-row);
        grid-column: var(--main-grid-column);
        box-shadow: inset 1px 1px var(--main-shadow-color);
        border-radius: 0;
    }

    #content {
        padding-left: var(--spacing-300);
        padding-right: var(--spacing-300);
    }
}

@media screen and (min-width: 768px) {
    #content {
        max-width: calc(100vw - var(--main-menu-width) - var(--spacing-300) - var(--spacing-300));
        margin: 0 auto;
    }
}

@media screen and (min-width: 960px) {
    #content {
        max-width: calc(var(--container-md) - var(--main-menu-width) - var(--spacing-300) - var(--spacing-300));
    }
}

@media screen and (min-width: 1024px) {
    #content {
        max-width: calc(var(--container-lg) - var(--main-menu-width) - var(--spacing-300) - var(--spacing-300));
    }
}

@media screen and (min-width: 1200px) {
    body {
        grid-template-columns: var(--body-grid-template-columns-xl);

        &.api-docs {
            grid-template-columns: var(--body-grid-template-columns);

            #content {
                max-width: calc(var(--container-xl) - var(--main-menu-width) - var(--spacing-300) - var(--spacing-300));
            }

            #fsdocs-page-menu {
                display: none;
            }
        }
    }

    header {
        grid-column: span 3;
    }

    #fsdocs-page-menu {
        grid-column: 3;
        display: block;
    }

    #content {
        max-width: calc(var(--container-xl) - var(--main-menu-width) - var(--page-menu-width) - var(--spacing-300) - var(--spacing-300));
    }
}

@media screen and (min-width: 1400px) {
    body {
        &.api-docs, &:has(#fsdocs-page-menu .empty) {
            #content {
                max-width: calc(var(--container-xxl) - var(--main-menu-width) - var(--spacing-300) - var(--spacing-300));
            }
        }
    }

    #content {
        max-width: calc(var(--container-xxl) - var(--main-menu-width) - var(--page-menu-width) - var(--spacing-300) - var(--spacing-300));
    }
}

@media screen and (min-width: 1800px) {
    body {
        &.api-docs, &:has(#fsdocs-page-menu .empty) {
            #content {
                max-width: calc(var(--container-xxxl) - var(--main-menu-width) - var(--spacing-300) - var(--spacing-300));
            }
        }
    }

    #content {
        max-width: calc(var(--container-xxxl) - var(--main-menu-width) - var(--page-menu-width) - var(--spacing-300) - var(--spacing-300));
    }
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--heading-font-family);
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: var(--heading-color);
    text-decoration: none;
}

h1 {
    font-size: var(--font-600);
    line-height: var(--heading-line-height);
    margin-bottom: var(--spacing-400);
    margin-top: var(--spacing-50);
}

h2 {
    font-size: var(--font-500);
    line-height: var(--heading-line-height);
    margin-top: var(--spacing-400);
    margin-bottom: var(--spacing-300);
}

h3 {
    font-size: var(--font-400);
    line-height: var(--heading-line-height);
    margin-top: var(--spacing-300);
    margin-bottom: var(--spacing-200);
}

h4 {
    font-weight: bold;
}

h4, h5, h6 {
    font-size: var(--font-300);
    margin-top: var(--spacing-200);
    margin-bottom: var(--spacing-200);
}

@media screen and (min-width: 768px) {
    h1 {
        font-size: var(--font-800);
        margin-bottom: var(--spacing-400);
        line-height: var(--heading-line-height);
    }

    h2 {
        font-size: var(--font-700);
        margin-top: var(--spacing-500);
        margin-bottom: var(--spacing-400);
    }

    h3 {
        font-size: var(--font-600);
        margin-top: var(--spacing-500);
        margin-bottom: var(--spacing-200);
    }

    h4 {
        font-size: var(--font-500);
    }

    h4, h5, h6 {
        margin-top: var(--spacing-300);
    }
}

/* Common items */
a {
    color: var(--link-color);
}

p {
    line-height: 1.8;
    margin-top: var(--spacing-300);
}

ol, ul {
    padding-left: var(--spacing-400);
}

ol li, ul li {
    margin: var(--spacing-100) 0;
}

img {
    max-width: 100%;
}

#content > table {
    margin: var(--spacing-300) 0;
}

blockquote {
    border-left: var(--spacing-50) solid var(--primary);
    margin: var(--spacing-200) 0;
    margin-left: var(--spacing-200);
    padding: var(--spacing-100) var(--spacing-300);
    background-color: var(--blockquote-bacground-color);
    color: var(--blockquote-color);

    > p {
        margin: 0;
        padding: 0;
    }
}

@media screen and (min-width: 768px) {
    blockquote {
        margin-left: var(--spacing-400);
    }
}

/* Code snippets */

/* reset browser style */
pre {
    margin: 0;
    padding: 0;
}

code, table.pre, pre {
    background-color: var(--code-background);
    color: var(--code-color);
    font-family: var(--monospace-font);
    font-variant-ligatures: none;
    font-size: var(--font-200);
    -webkit-text-size-adjust: 100%;
}

h1 code, h2 code, h3 code, h4 code, h5 code, h6 code {
    font-size: inherit;
}

table.pre, #content > pre.fssnip {
    border: 1px solid var(--code-fence-border-color);
}

table.pre, pre.fssnip.highlighted {
    margin: var(--spacing-300) 0;
    padding: var(--spacing-200);
}

table.pre .snippet pre.fssnip {
    padding: 0;
    margin: 0;
}

p > code, li > code {
    padding: 2px var(--spacing-50);
}

table.pre, pre > code {
    display: block;
}

pre.fssnip > code {
    max-width: initial;
    margin-bottom: initial;
}

/* avoid problems with transparent background colors */
pre.fssnip.highlighted > code, table.pre .fssnip, table.pre .fssnip code {
    background-color: transparent;
}

/* Custom scrollbar styling */
body, aside, #menu-toggle .menu, table.pre, code, 
.fsdocs-entity-xmldoc > div > pre, div.fsdocs-summary > pre, 
dialog ul, div.fsdocs-tip, .fsdocs-xmldoc > pre {
    overflow-x: auto;
    max-width: 100%;

    &::-webkit-scrollbar {
        height: var(--spacing-100);
        width: var(--spacing-100);
    }

    &::-webkit-scrollbar-track {
        background-color: var(--scrollbar-track-background);
        border: 1px solid var(--scrollbar-track-border);
    }

    &::-webkit-scrollbar-thumb {
        background-color: var(--scrollbar-thumb-background);
    }
}

body, aside, #menu-toggle .menu, table.pre, code, 
.fsdocs-entity-xmldoc > div > pre, div.fsdocs-summary > pre, 
dialog ul, div.fsdocs-tip, .fsdocs-xmldoc > pre {
    @media screen and (min-width: 768px) {
        &::-webkit-scrollbar {
            height: var(--spacing-200);
            width: var(--spacing-300);
        }
    }
}

table.pre, code, pre.fssnip {
    border-radius: var(--radius);
}

/* Code coloring */
.param-name,
.return-name,
.param {
    font-weight: 900;
    font-size: var(--font-100);
    font-family: var(--monospace-font);
    font-variant-ligatures: none;
}

.fssnip {
    /* strings --- and stlyes for other string related formats */

    & span.s {
        color: var(--code-strings-color);
    }

    /* printf formatters */

    & span.pf {
        color: var(--code-printf-color);
    }

    /* escaped chars */

    & span.e {
        color: var(--code-escaped-color);
    }

    /* identifiers --- and styles for more specific identifier types */

    & span.id {
        color: var(--code-identifiers-color);;
    }

    /* module */

    & span.m {
        color: var(--code-module-color);
    }

    /* reference type */

    & span.rt {
        color: var(--code-reference-color);
    }

    /* value type */

    & span.vt {
        color: var(--code-value-color);
    }

    /* interface */

    & span.if {
        color: var(--code-interface-color);
    }

    /* type argument */

    & span.ta {
        color: var(--code-typearg-color);
    }

    /* disposable */

    & span.d {
        color: var(--code-disposable-color);
    }

    /* property */

    & span.prop {
        color: var(--code-property-color);
    }

    /* punctuation */

    & span.p {
        color: var(--code-punctuation-color);
    }

    & span.pn {
        color: var(--code-punctuation2-color);
    }

    /* function */

    & span.f {
        color: var(--code-function-color);
    }

    & span.fn {
        color: var(--code-function2-color);
    }

    /* active pattern */

    & span.pat {
        color: var(--code-activepattern-color);
    }

    /* union case */

    & span.u {
        color: var(--code-unioncase-color);
    }

    /* enumeration */

    & span.e {
        color: var(--code-enumeration-color);
    }

    /* keywords */

    & span.k {
        color: var(--code-keywords-color);
    }

    /* comment */

    & span.c {
        color: var(--code-comment-color);
        font-weight: 400;
        font-style: italic;
    }

    /* operators */

    & span.o {
        color: var(--code-operators-color);
    }

    /* numbers */

    & span.n {
        color: var(--code-numbers-color);
    }

    /* line number */

    & span.l {
        color: var(--code-linenumbers-color);
    }

    /* mutable var or ref cell */

    & span.v {
        color: var(--code-mutable-color);
        font-weight: bold;
    }

    /* inactive code */

    & span.inactive {
        color: var(--code-inactive-color);
    }

    /* preprocessor */

    & span.prep {
        color: var(--code-preprocessor-color);
    }

    /* fsi output */

    & span.fsi {
        color: var(--code-fsioutput-color);
    }
}

/* tooltips */
div.fsdocs-tip {
    z-index: 1000;
    display: none;
    background-color: var(--doc-tip-background);
    border-radius: var(--radius);
    border: 1px solid var(--header-border);
    padding: var(--spacing-200);
    font-family: var(--monospace-font);
    font-variant-ligatures: none;
    color: var(--code-color);
    box-shadow: 0 1px 1px var(--shadow-color);

    & code {
        color: var(--code-color);
    }
}

span[onmouseout] {
    cursor: pointer;
}

/* API docs */
#content > div > h2:first-child {
    margin-top: 0;
}

.fsdocs-member-list-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}

.fsdocs-xmldoc {
    & pre {
        overflow-x: auto;
    }
}

.table {
    width: 100%;
    table-layout: fixed;

    & thead tr td {
        font-weight: bold;
        padding: var(--spacing-400) 0;
    }

    & tr {
        display: flex;
        flex-flow: row wrap;
        column-gap: var(--spacing-300);

        & td:first-of-type {
            flex: 25 0 0;
            min-width: var(--api-docs-first-column-min-width);
            overflow-x: hidden;
            text-overflow: ellipsis;
            overflow-wrap: break-word;

            & p {
                margin: unset;
            }
        }

        & td:nth-of-type(2) {
            flex: 75 0 0;
            min-width: var(--api-docs-second-column-min-width);
        }
    }

    & tbody td {
        border-top: 1px solid var(--header-border);
        padding: var(--spacing-300) 0;
    }

    .fsdocs-entity-xmldoc {
        > div {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-start;

            & p.fsdocs-summary {
                margin: 0;
                flex-grow: 1;
            }

            & pre {
                margin-bottom: var(--spacing-200);
                padding: var(--spacing-50);
                flex-grow: 1;
                overflow-x: auto;
            }
        }
    }

    .fsdocs-summary-contents {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .fsdocs-member-xmldoc-column {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    .icon-button-row {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: flex-start;
        height: calc(-1 * var(--spacing-200));
    }

    .fsdocs-member-xmldoc {
        & summary {
            display: list-item;
            counter-increment: list-item 0;
            list-style: disclosure-closed outside;
            cursor: pointer;
            width: calc(100% - var(--spacing-300));
            margin-left: var(--spacing-300);

            > .fsdocs-summary {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: flex-start;

                & p.fsdocs-summary {
                    margin: 0;
                    flex-grow: 1;
                }

                & pre {
                    margin-bottom: var(--spacing-200);
                    padding: var(--spacing-50);
                    flex-grow: 1;
                    overflow-x: auto;
                }
            }
        }

        & details[open] summary {
            list-style-type: disclosure-open;
            margin-bottom: var(--spacing-200);
        }

        .fsdocs-returns, .fsdocs-params {
            margin: var(--spacing-200) 0 var(--spacing-200) var(--spacing-300);

            &:first-child {
                margin-top: 0;
            }

            &:last-child {
                margin-bottom: 0;
            }
        }

        .fsdocs-return-name, .fsdocs-param-name {
            font-weight: 500;
        }

        .fsdocs-param-docs p {
            margin: var(--spacing-200) 0;
        }

        > div.fsdocs-summary {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-start;
                margin: 0 0 0 var(--spacing-300);

            & p {
                margin: 0;
            }
        }
    }
}

.fsdocs-source-link {
    display: none;
    padding: 0 var(--spacing-100);
    color: var(--text-color);
    cursor: pointer;
    height: var(--font-500);
    width: var(--font-500);
    margin: 0 var(--spacing-50);

    &:hover {
        color: var(--primary);
    }
}

@media screen and (min-width: 768px) {
    .fsdocs-source-link {
        display: block;
    }
}

/* Search */
::backdrop {
    background-color: #020202;
    opacity: 0.5;
}

dialog {
    background-color: var(--dialog-background-color);
    margin: var(--spacing-700) auto;
    padding: var(--spacing-100);
    border: none;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease-in-out;
    border-radius: var(--radius);
    width: var(--dialog-width);

    &[open] {
        opacity: 1;
        visibility: visible;
    }

    & input[type=search] {
        margin: 0;
        display: block;
        width: 100%;
        padding: var(--spacing-200);
        outline: 1px solid var(--primary);
        border-radius: var(--radius);
        border: none;

        &::placeholder {
            font-size: var(--font-400);
        }
    }

    .empty {
        color: var(--dialog-empty-color);
        text-align: center;
        font-size: var(--font-100);
        margin: var(--spacing-100);
        margin-bottom: 0;
    }

    & ul {
        overflow-y: auto;
        max-height: calc(50vh - var(--spacing-700) - var(--spacing-700));
        list-style: none;
        padding: 0;

        & li {
            margin: 0;
            border-bottom: 1px solid var(--header-border);

            &:hover {
                & a, & a iconify-icon {
                    background-color: var(--dialog-link-hover-background-color);
                    color: var(--dialog-link-hover-color);
                }
            }

            & a {
                display: flex;
                padding: var(--spacing-300);
                overflow-x: hidden;
                color: var(--dialog-link-color);

                & iconify-icon {
                    color: var(--dialog-icon-color);
                    width: 24px;
                    margin-right: var(--spacing-200);
                }
            }
        }
    }
}

/* Variables don't seem to work on ::backdrop */
[data-theme=dark] {
    ::backdrop {
        opacity: 0.75;
    }
}