.note {
    --padding: 1.25rem;

    margin: 1.5rem 0;
    padding: 1rem var(--padding) 0;
    background-color: rgb(from var(--color-edge) r g b / 0.4);
    font-size: 0.875em;

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

    --note-color: transparent;

    &[data-type='info'] {
        --note-color: var(--color-info);
    }

    &[data-type='warning'] {
        --note-color: var(--color-warning);
    }

    &[data-type='danger'] {
        --note-color: var(--color-danger);
    }

    --color-link: hsl(from var(--note-color) h s 50%);
    --color-accent: hsl(from var(--note-color) h s 50%);

    background-color: rgb(from var(--note-color) r g b / 0.15);
    border: 1px solid rgb(from var(--note-color) r g b / 0.2);

    /* corners */
    border-radius: 1rem;
    @supports (corner-shape: squircle) {
        border-radius: 2rem;
        corner-shape: squircle;
    }

    & p > code {
        background-color: hsl(from var(--note-color) h s 30% / 0.15);
    }

    & pre {
        background-color: rgb(from var(--color-background) r g b / 0.8);

        --s: 0.75rem;
        --r: 1rem;
        border-radius: var(--r);
        @supports (corner-shape: squircle) {
            & {
                --s: 0.5rem;
                --r: 1rem;
                corner-shape: squircle;
            }
        }
    }

    --color-edge: rgb(from var(--note-color) r g b / 0.25);
}

.page-index,
.heading-index {
    color: var(--color-foreground);

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

    & ul ul {
        margin-left: 1em;
        margin-top: 0.5em;
        margin-bottom: 1em;
        margin-left: 0;
        border-left: 1px solid var(--color-edge);
        padding-left: 1em;
    }

    & li + li {
        margin-top: 0.25em;
    }

    & a {
        display: inline-block;
        color: currentColor;
        text-decoration: none;
        line-height: 1.25;
        font-size: 0.875em;
    }

    & summary,
    & a {
        font-weight: 500;
        font-size: 0.875em;
    }

    & ul ul {
        & a {
            font-weight: 300;
        }
    }
}

.page-index {
    --icon-size: 1.25em;

    & > ul {
        margin: 0 0 0 calc(var(--icon-size) * 0.5);
        & > li + li {
            margin-top: 1em;
        }
    }

    & svg {
        width: var(--icon-size);
        height: var(--icon-size);
        margin-right: 0.5em;
        margin-left: calc(var(--icon-size) * -0.5);
        color: var(--color-edge-dark);
    }

    & ul ul {
        & a {
            display: block;
        }

        & summary {
            display: inline-flex;
            font-weight: 300;
        }

        & summary,
        & a {
            margin-left: -0.5em;
            padding: 0.25em 0.5em;
        }
    }

    & li.active > a {
        color: #fff;
        background-color: var(--color-accent);
        background: var(--brand-gradient);
        font-weight: 400;
        text-shadow: 0 1px 1px var(--color-accent);

        /* corners */
        border-radius: 0.5em;
        @supports (corner-shape: squircle) {
            & {
                corner-shape: squircle;
                border-radius: 1em;
            }
        }
    }
}

.heading-index {
    & h2 {
        font-size: 1em;
        margin: 0 0 1em;
        font-weight: 500;
    }

    & a {
        font-size: 0.875em;
    }

    & li.active > a {
        color: var(--color-link);
    }
}

sticky-details {
    & details {
        user-select: none;

        & > summary {
            cursor: pointer;
            list-style: none;

            display: flex;
            align-items: center;

            &::-webkit-details-marker {
                display: none;
            }

            &::after {
                margin-left: 0.75em;
                width: 0.25em;
                height: 0.25em;
                content: '';
                transform-origin: center center;
                transform: rotate(-45deg);
                border-right: 1.5px solid currentColor;
                border-bottom: 1.5px solid currentColor;
            }
        }

        &[data-ready] > summary::after {
            transition: transform 0.15s ease-in-out;
        }

        &[open] > summary::after {
            transform: rotate(45deg);
        }
    }
}

search-button {
    display: flex;
    box-sizing: border-box;

    & button {
        display: flex;
        flex: 1;
        gap: 0.5em;
        align-items: center;

        &:not([disabled]) {
            cursor: pointer;
        }
    }

    & svg {
        width: 1em;
        height: 1em;
    }

    & kbd {
        margin-left: auto;
        letter-spacing: 2px;
    }

    container-type: inline-size;
    @container (width < 6em) {
        & button {
            margin: 0;
            padding: 0;
            border: 0;
            width: 1.5em;
            height: 1.5em;
            aspect-ratio: 1;
            font-size: 1em;
            justify-content: center;
            background-color: transparent;
            box-shadow: none;
        }

        & svg {
            width: 1.25em;
            height: 1.25em;
            stroke-width: 3;
        }

        & kbd {
            display: none;
        }

        & span {
            display: none;
        }
    }
}

:where(search-button button),
.pagefind-ui__search-input {
    font-weight: 300;
    color: currentColor;
    padding: 0.5em 0.5em 0.5em 0.75em;
    border: 1px solid var(--color-edge);
    border-bottom-color: var(--color-edge-dark);
    background-color: var(--color-input);
    box-shadow: 0 0.125em 0.25em var(--color-shadow);
    outline: none;

    border-radius: 0.5em;
    @supports (corner-shape: squircle) {
        & {
            corner-shape: squircle;
            border-radius: 1em;
        }
    }

    &:not([disabled]) {
        &:hover {
            border-color: var(--color-accent);
        }
    }

    &:focus-in {
        border: 1px solid var(--color-accent);
        box-shadow: 0 0 0 1px var(--color-accent);
    }
}

search-button kbd,
.pagefind-ui__button,
.pagefind-ui__search-clear {
    font-family:
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        Roboto,
        'Helvetica Neue',
        Arial,
        'Noto Sans',
        sans-serif,
        'Apple Color Emoji',
        'Segoe UI Emoji',
        'Segoe UI Symbol',
        'Noto Color Emoji';
    font-weight: 400;
    line-height: 1;
    padding: 0.25em 0.5em;
    background-color: var(--color-edge);
    border-radius: 0.25rem;
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
    border: 0;
}

.pagefind-ui__button {
    line-height: 1.5;
    cursor: pointer;
}

/* Pagefind */
.pagefind-ui__form {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto auto;
}

.pagefind-ui__search-input {
    width: 100%;
    box-sizing: border-box;
    grid-row: 1;
    grid-column: 1;
    font-size: 1rem;
}

.pagefind-ui__search-clear {
    grid-row: 1;
    grid-column: 1;
    margin-right: 0.5em;
    align-self: center;
    justify-self: end;
    min-width: 0;
    position: relative;
    z-index: 1;
    cursor: pointer;
    color: currentColor;
}

.pagefind-ui__drawer {
    grid-row: 2;
}

.pagefind-ui__message {
    font-size: 0.75em;
    margin: 0.5em 0;
    text-align: right;
    opacity: 0.5;
}

.pagefind-ui__results {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--color-edge);

    & + .pagefind-ui__button {
        margin-top: 1em;
    }
}

.pagefind-ui__result {
    padding: 0.5em 0 1em;
    border-bottom: 1px solid var(--color-edge);
}

.pagefind-ui__result mark {
    --fill: rgb(from var(--color-mark) r g b / 0.2);
    color: hsl(from var(--color-mark) h s calc(l + 20));
    background-color: var(--fill);
    box-shadow: 0 0 0 1px var(--fill);
    border-radius: 0.25em;
}

.pagefind-ui__result::marker {
    color: transparent;
}

.pagefind-ui__result-title {
    font-weight: 600;
    margin: 0;

    & a {
        text-decoration: none;
        &:hover {
            text-decoration: underline;
        }
    }
}

.pagefind-ui__result-excerpt {
    margin: 0;
    font-size: 0.875em;
}

.pagefind-ui__result-nested {
    margin-left: 1em;
    margin-top: 0.5em;
    font-size: 0.875em;

    & .pagefind-ui__result-title {
        margin-bottom: 0;
        & a {
            color: currentColor;
        }
    }

    &::before {
        content: '';
        position: absolute;
        width: 0.375em;
        height: 0.375em;
        border-radius: 2em;
        margin-left: -1em;
        margin-top: 0.5em;
        background: rgb(255 255 255 / 0.25);
    }
}

tab-panels {
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: auto;

    & > ul {
        --r: 0.5rem;
        @supports (corner-shape: squircle) {
            corner-shape: squircle;
            --r: 1rem;
        }

        grid-row: 1;
        grid-column: 1;
        padding: 0;
        margin: 0 0 -1px 0;
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        min-width: 0;
        background-color: var(--color-edge);
        border-radius: var(--r) var(--r) 0 0;
        border: 1px solid var(--color-edge);
        border-bottom: 0;

        & a {
            color: rgb(from currentColor r g b / 0.75);
            display: block;
            font-size: 0.875em;
            padding: 0.5rem 1rem;
            text-decoration: none;
        }

        & [aria-selected='true'] {
            --r: 0.5rem;

            @supports (corner-shape: squircle) {
                corner-shape: squircle;
                --r: 0.75rem;
            }

            color: var(--color-accent);
            background: var(--color-background);
            border-bottom: 1px solid var(--color-background);
            border-radius: var(--r) var(--r) 0 0;
        }
    }

    & > tab-panel {
        grid-row: 2;
        grid-column: 1;
        min-width: 0;
    }
}

tab-panel {
    box-sizing: border-box;
    padding: 0 1.5rem 0;
    margin: 0;
    overflow: auto;
    background-color: var(--color-background);
    border: 1px solid var(--color-edge);
    border-top: 0;

    &:has(pre:only-child) {
        padding: 0;
        border: 0;
        mask: none;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        & pre {
            width: auto;
            margin: 0;
            border-top: 0;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }
    }
}

tab-panel {
    --s: 1.5rem;
    --r: 2rem;
    border-radius: 0 0 var(--r) var(--r);

    @supports (corner-shape: squircle) {
        & {
            --s: 2rem;
            --r: 3rem;
            corner-shape: squircle;
        }
    }

    /* corners */
    @supports (animation-timeline: scroll(x self)) {
        & {
            --overflows-x: 0;
            --overflows-y: 0;
            animation: detect-overflow-x, detect-overflow-y;
            animation-timeline: scroll(x self), scroll(y self);

            --tl: var(--r);
            --tr: calc(var(--r) - (var(--overflows-y) * var(--s)));
            --br: calc(var(--r) - (max(var(--overflows-x), var(--overflows-y)) * var(--s)));
            --bl: calc(var(--r) - (var(--overflows-x) * var(--s)));

            border-radius: 0 0 var(--br) var(--bl);
        }
    }
}

step-list {
    display: block;

    --padding: 1em;
    --size: 2em;

    & > ol {
        margin-left: 0;
        margin-right: 0;
        padding: 0;
        list-style: none;
        counter-reset: item;

        & > li {
            counter-increment: item;
            position: relative;

            padding-left: calc(var(--size) + var(--padding));

            &::after {
                content: '';

                position: absolute;
                width: var(--size);
                top: var(--size);
                left: 0;
                bottom: 0;

                background: linear-gradient(
                        to bottom,
                        var(--color-edge) calc(100% - 3em),
                        transparent
                    )
                    no-repeat 50% top / 1px 100%;
            }

            &::before {
                content: counter(item);

                position: absolute;
                top: 0;
                left: 0;
                width: calc(var(--size) - 2px);
                height: calc(var(--size) - 2px);

                border: 1px solid rgb(from var(--color-edge) r g b);
                color: currentColor;
                font-weight: 500;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 9999em;
            }
        }
    }
}

.crumbs {
    display: flex;
    align-items: center;
    gap: 0.5em;

    & svg {
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    & span,
    & a,
    & button {
        font-size: 0.875em;
        white-space: nowrap;
    }

    & a,
    & button:not([hidden]) {
        border: 0;
        padding: 0;
        background-color: transparent;
        color: currentColor;
        text-decoration: none;
        display: flex;
        align-items: center;
        cursor: pointer;
    }

    & button:last-child {
        margin-left: auto;
    }

    & span:last-of-type {
        opacity: 0.5;
    }

    & span,
    & a {
        min-width: 2em;
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    & > svg {
        width: 1em;
        height: 1em;
        opacity: 0.5;
    }

    & button {
        gap: 0.5em;
    }

    & button svg {
        width: 1.25em;
        height: 1.25em;
    }

    @media (width < 25em) {
        & button:last-child {
            text-indent: -999px;
            overflow: hidden;
        }
    }
}

.docs {
    & .max-content {
        width: 95em;
        margin: 0;
    }

    & header {
        --height: var(--header-height);

        box-sizing: border-box;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        right: 0;
        height: var(--height);

        & .logo {
            margin-left: var(--sidebar-padding);
        }

        & .max-content {
            display: grid;
            align-items: center;
            justify-content: stretch;
            column-gap: var(--page-padding);
            grid-template-columns: auto auto auto;

            & > div:first-of-type {
                grid-column: 1;
                display: flex;
                align-items: center;
            }

            & > search-button {
                grid-column: 2;
                min-width: 1em;
                max-width: 20em;
            }

            & > div:last-of-type {
                grid-column: 3;
                min-width: 6em;
                margin-right: var(--sidebar-padding);
            }
        }

        /* frosted glass effect */
        &::before,
        &::after {
            position: absolute;
            content: '';
            left: 0;
            right: 0;
            pointer-events: none;
            mask: var(--mask);
            -webkit-mask: var(--mask);
        }

        /* backdrop filter */
        &::before {
            z-index: -1;
            top: 0;

            /* so we extend the blur slightly outside of the header, this makes it look nicer */
            --blur: 10px;
            bottom: calc(var(--blur) * -1);
            backdrop-filter: blur(var(--blur));
            background: transparent
                linear-gradient(
                    to bottom,
                    var(--color-background) 0%,
                    rgb(from var(--color-background) r g b / 0.9) 50%,
                    rgb(from var(--color-background) r g b / 0.1)
                )
                repeat-x 0 0 / 100% var(--height);

            --mask: linear-gradient(black, black) no-repeat 0 0 / 100% var(--height);
        }

        /* shiny bottom edge */
        &::after {
            z-index: 1;
            height: 40px;
            top: calc(100% - 20px);
            backdrop-filter: var(--edge-backdrop-filter);

            --mask: linear-gradient(to right, transparent, black 25%, black 75%, transparent)
                no-repeat 0 20px / 100% 1px;
        }
    }

    & h1 {
        margin-top: 1.5em;
        padding-bottom: 0;
        word-wrap: break-word;
    }

    & main {
        display: block;
        min-height: calc(100vh - var(--header-height));

        & > article {
            container-type: inline-size;

            max-width: 80em;

            & .article-header,
            & .article-body {
                padding: 0 var(--page-padding);
            }

            & .article-header h1 ~ * {
                font-size: 1.125em;
            }

            & .article-body {
                padding-bottom: var(--page-padding);
            }

            @container (width <= 800px) {
                & .article-index {
                    & h2 {
                        display: none;
                    }
                }
            }

            @container (width > 800px) {
                & .article-header,
                & .article-body {
                    margin-right: var(--sidebar-width);
                }

                & .article-index {
                    --margin: 1em;

                    position: fixed;
                    box-sizing: border-box;
                    top: calc(var(--header-height) + var(--margin));
                    right: 0;
                    left: auto;
                    width: var(--sidebar-width);
                    padding: 1em;
                    margin: 0;
                    background-color: transparent;
                    z-index: 1;

                    & nav {
                        box-sizing: border-box;
                        overflow: auto;
                        padding: var(--sidebar-padding);
                        border: 1px solid var(--color-edge);
                        max-height: calc(100vh - var(--header-height) - 4em);
                        background-color: var(--color-background);

                        --s: 1.5em;
                        --tl: 2em;
                        border-radius: var(--tl);

                        @supports (corner-shape: squircle) {
                            & {
                                --s: 2em;
                                --tl: 3em;
                                corner-shape: squircle;
                            }
                        }

                        /* corners */
                        @supports (animation-timeline: scroll(x self)) {
                            & {
                                --overflows-x: 0;
                                --overflows-y: 0;
                                animation: detect-overflow-x, detect-overflow-y;
                                animation-timeline: scroll(x self), scroll(y self);

                                --s: 1.5em;
                                --tl: 2em;

                                --tr: calc(var(--tl) - (var(--overflows-y) * var(--s)));
                                --br: calc(
                                    var(--tl) -
                                        (max(var(--overflows-x), var(--overflows-y)) * var(--s))
                                );
                                --bl: calc(var(--tl) - (var(--overflows-x) * var(--s)));

                                border-radius: var(--tl) var(--tr) var(--br) var(--bl);
                            }
                        }
                    }
                }
            }

            @container (width >= 80em) {
                & .article-index {
                    left: 80em;
                    right: auto;
                }
            }
        }
    }

    & .docs-index,
    & .article-index {
        scrollbar-gutter: stable;
    }

    & .docs-index {
        & a {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
    }
}

/* small screens */
@media (width <= 50em) {
    .docs {
        --page-offset: calc(2 * var(--header-height));

        scroll-padding: calc(var(--page-offset) + var(--page-padding));

        & header {
            --height: calc(2 * var(--header-height));
            padding-bottom: var(--header-height);
        }

        & .crumbs {
            position: fixed;
            top: var(--header-height);
            left: 0;
            right: 0;
            padding: 0 var(--page-padding);
            height: var(--header-height);
            z-index: 1;
        }

        & main {
            padding-top: var(--page-offset);
        }

        & header search-button {
            font-size: 0.875em;
        }

        /* Override default popover style */
        & .article-index,
        & .docs-index {
            box-sizing: border-box;
            padding: var(--page-padding);
            margin: 0;
            top: calc(var(--page-offset) - 1px);
            z-index: 2;
            left: 0;
            width: 100vw;
            max-height: calc(100vh - var(--page-offset));
            border: 0;
            box-shadow: 0 -0.5em 0.5em 0 var(--color-background-panel);
            overflow: auto;
            background: var(--color-background-panel)
                linear-gradient(
                    to right,
                    transparent,
                    var(--color-edge) 25%,
                    var(--color-edge) 75%,
                    transparent
                )
                no-repeat bottom left / 100% 1px;

            &::backdrop {
                top: var(--page-offset);
                background-color: var(--color-overlay);
                backdrop-filter: saturate(25%);
            }
        }

        & .article-index {
            text-align: right;
            & ul ul {
                border-left: 0;
                border-right: 1px solid var(--color-edge);
                padding-right: 1rem;
                padding-left: 0;
            }
        }
    }
}

@media (width > 50em) {
    .crumbs {
        display: none;
    }

    .docs {
        & header {
            --height: var(--header-height);
            & .max-content {
                grid-template-columns: var(--sidebar-width) auto auto;
            }
        }

        & main {
            padding-top: var(--header-height);
            padding-left: var(--sidebar-width);
        }

        & footer {
            margin-left: var(--sidebar-width);
        }

        & .article-index {
            appearance: none;
            position: static;
            display: block;
            margin: 2em 0;
            border: 0;
            padding: 0 var(--page-padding);
            background-color: transparent;
        }

        & .docs-index {
            appearance: none;
            display: block;
            position: fixed;
            margin: 0;
            left: 0;
            top: var(--header-height);
            width: var(--sidebar-width);
            box-sizing: border-box;
            padding: var(--sidebar-padding);
            padding-right: 0.75em;
            height: calc(100vh - var(--header-height));
            border: 0;
            border-right: 1px solid var(--color-edge);
            background-color: var(--color-background);
        }
    }
}