/* 
    
	Styles
	
--------------------------------------- */

/* ----- Fonts ----- */

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter/static/Inter-Regular.woff2') format('woff2'),
        url('../fonts/Inter/static/Inter-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter/static/Inter-Medium.woff2') format('woff2'),
        url('../fonts/Inter/static/Inter-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter/static/Inter-SemiBold.woff2') format('woff2'),
        url('../fonts/Inter/static/Inter-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter/static/Inter-Bold.woff2') format('woff2'),
        url('../fonts/Inter/static/Inter-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}


/* ----- Variables ----- */

:root {
        
    /* spacing */

    --spacing-1: 10px;
    --spacing-1-5: 15px;
    --spacing-2: 20px;
    --spacing-3: 30px;
    --spacing-4: 40px;
    
    --spacing-sm: 15px;
    --spacing-md: 40px;
    --spacing-lg: 60px;

    @media (min-width: 1024px) {
        --spacing-sm: 30px;
        --spacing-md: 60px;
        --spacing-lg: 90px;
    }

    /* roundness */
    
    --rounded: 15px;
    --rounded-sm: 12px;
    --rounded-lg: 20px;
    --rounded-full: 999px;

    /* colors */
    
    --color-white: 0, 0%, 100%;     /* #ffffff */
    --color-light: 0, 0%, 96%;      /* #f4f4f4 */
    --color-light-gray: 0, 0%, 93%; /* #ececec */
    --color-dark: 0, 0%, 13%;       /* #222222 */
    --color-blue: 212, 75%, 59%;    /* #4891E5 */

    --color-headings: hsl(var(--color-dark));
    --color-text: hsla(var(--color-dark), 0.7);
    --color-links: hsl(var(--color-blue));

    &:is(.site-theme-dark) {
        --color-headings: hsl(var(--color-light));
        --color-text: hsla(var(--color-light), 0.7);
    }

    /* shadows */

    --shadow-dark: 0px 5px var(--spacing-md) hsla(var(--color-dark), 0.1);
    --shadow-dark-lg: 0px 5px var(--spacing-lg) hsla(var(--color-dark), 0.1);

    /* typography */

    --font-family: 'Inter', 'sans-serif';
    --font-family-code: ui-monospace, Consolas, monospace;

    --text-base: 1rem;      /* 16px (browsers default) */
    --text-sm: 0.875rem;    /* 14px */

    --text-h1: 2.25rem;     /* 36px */
    --text-h2: 1.75rem;     /* 28px */
    --text-h3: 1.25rem;     /* 20px */
    --text-h4: 1.125rem;    /* 18px */
    --text-h5: 1.0625rem;   /* 17px */
    --text-h6: var(--text-base);

    @media (min-width: 1024px) {
        --text-h1: 3.875rem;    /* 62px */
        --text-h2: 2.625rem;    /* 42px */
        --text-h3: 1.5rem;      /* 24px */
        --text-h4: 1.3125rem;   /* 21px */
        --text-h5: 1.125rem;    /* 18px */
    }

    --tracking-tight: -0.25px;
    --tracking-tighter: -0.5px;
    --tracking-tightest: -1px;
    --tracking-super-tight: -1.25px;
    --tracking-mega-tight: -1.75px;

    @media (min-width: 1024px) {
        --tracking-super-tight: -1.75px;
        --tracking-mega-tight: -2.25px;
    }

    --line-height: normal;
    --line-height-p: 1.5;
}


/* ----- Base - Reset ----- */

*,
::before,
::after {
	box-sizing: border-box;
}

* {
    margin: 0; /* 1. Remove margin from all elements */
}

html {
    -webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */
	tab-size: 4; /* 3. Use a more readable tab size (opinionated). */
}

body {
    -webkit-font-smoothing: antialiased;
}

table {
	border-color: currentcolor;
}

button,
[type='button'],
[type='reset'],
[type='submit'] {
	-webkit-appearance: button;
    cursor: pointer;
}

legend {
	padding: 0;
}

progress {
	vertical-align: baseline;
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
	height: auto;
}

[type='search'] {
	-webkit-appearance: textfield; /* 1 */
	outline-offset: -2px; /* 2 */
}

::-webkit-search-decoration {
	-webkit-appearance: none;
}

::-webkit-file-upload-button {
	-webkit-appearance: button; /* 1 */
	font: inherit; /* 2 */
}


/* ----- Typography ----- */

html {
    font-family: var(--font-family);
    scroll-behavior: smooth;
}

h1,h2,h3,h4,h5,h6 {
    display: block;
    margin: 0;
    padding: 0;
    color: var(--color-headings);
    font-weight: 600;
    overflow-wrap: break-word;
    text-wrap: balance;
}

h1 {
    font-size: var(--text-h1);
    letter-spacing: var(--tracking-mega-tight);
}

h2 {
    font-size: var(--text-h2);
    letter-spacing: var(--tracking-mega-tight);
}

h3 {
    font-size: var(--text-h3);
    letter-spacing: var(--tracking-tightest);
}

h4 {
    font-size: var(--text-h4);
    letter-spacing: var(--tracking-tightest);
}

h5 {
    font-size: var(--text-h5);
    letter-spacing: var(--tracking-tighter);
}

h6 {
    font-size: var(--text-h6);
    letter-spacing: var(--tracking-tight);
}

p {
    color: var(--color-text);
    overflow-wrap: break-word;
    text-wrap: pretty;
}

a {
    color: var(--color-links);
}

small {
    font-size: var(--text-sm);
}

b,
strong {
	font-weight: bold;
}

code,
kbd,
samp,
pre {
	font-family: var(--font-family-code);
	font-size: var(--text-base); /* 2 */
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

summary {
	display: list-item;
}

button,
input,
optgroup,
select,
textarea {
	font-family: inherit; /* 1 */
	font-size: 100%; /* 1 */
	margin: 0; /* 2 */
}


/* ----- Utility ----- */

body {
    background-color: hsl(var(--color-light));
}

.site-theme-dark body {
    background-color: #191919;
}

/* visibility */

.screen-reader-text {
    display: none;
    visibility: hidden;
    opacity: 0;
}

.invisible {
    display: none;
}

.site-theme-dark {

    & .dark-invisible {
        display: none;
    }

    & .dark-visible {
        display: initial;
    }
}

/* spacing */

.mt-none {
    margin-top: 0;
}

.mb-none {
    margin-bottom: 0;
}

.mt-sm {
    margin-top: var(--spacing-sm);
}

.mt-md {
    margin-top: var(--spacing-md);
}

.mt-lg {
    margin-top: var(--spacing-lg);
}

.mb-sm {
    margin-bottom: var(--spacing-sm);
}

.mb-md {
    margin-bottom: var(--spacing-md);
}

.mb-lg {
    margin-bottom: var(--spacing-lg);
}


/* ----- Grid ----- */

.docs-grid {
    position: relative;
    display: block;
    width: 100%;
    padding-top: 45px;
    
    & .docs-page {
        position: relative;
        display: block;
        margin: var(--spacing-sm);
        padding-top: var(--spacing-sm);
        transition: transform 325ms ease-out;

        
    }

    & .docs-sidebar {
        position: absolute;
        top: 0;
        display: block;
        width: calc(100% - var(--spacing-sm) * 2);
        margin: 0 var(--spacing-sm) var(--spacing-sm) var(--spacing-sm);
        margin-right: -230px;
        transition: all 325ms ease-in;
    }
}

@media (max-width: 1024px) {
    .docs-grid {
        overflow: hidden;

        & .docs-page {

            &:is(.mobile-nav-open) {
                transform: translateX(87%);
            }
        }
    }
}

@media (min-width: 1024px) {
    .docs-grid {
        display: flex;
        padding-top: 0;

        & .docs-page {
            width: 100%;
            max-width: 1550px;
            padding-top: 0;
            z-index: 2;
        }

        & .docs-sidebar {
            position: relative;
            width: 100%;
            max-width: 300px;
            margin: var(--spacing-sm);
            z-index: 1;
        }
    }
}


/* ----- Page Content ----- */

.docs-page {
    position: relative;
    border-radius: var(--rounded-lg);
    border: 1px solid hsl(var(--color-light-gray));
    background-color: hsl(var(--color-white));
    box-shadow: var(--shadow-dark-lg);
}

.page-content {
    padding: var(--spacing-sm);    
    
    & img {
        width: 100%;
        height: auto;
        border-radius: var(--rounded);
    }
    
    & p, ul.list-steps {
        line-height: var(--line-height-p);
    }

    & h1, h2 {
        display: block;
        margin-bottom: var(--spacing-sm);
        padding-bottom: var(--spacing-sm);
        border-bottom: 1px solid hsla(var(--color-dark), 0.15);
    }

    & h3 {
        display: block;
        margin-bottom: var(--spacing-1-5);
    }

    & a {
        padding-bottom: 1px;
        border-bottom: 2px solid hsla(var(--color-blue), 0.2);
        font-weight: 500;
        text-decoration: none;
        transition: all 250ms ease;

        &:hover {
            border-bottom-color: hsla(var(--color-blue), 1);
            color: var(--color-headings);
        }
    }

    & code {
        padding: 5px;
        border-radius: 5px;
        background-color: hsla(var(--color-dark), 0.1);
        color: var(--color-headings);
        font-weight: normal;
        word-break: break-all;
        word-wrap: break-word;
        letter-spacing: 0;
    }

    & pre {
        display: block;
        width: 100%;
        margin: var(--spacing-sm) 0;
        padding: var(--spacing-sm);
        border-radius: var(--rounded);
        border: 2px solid hsla(var(--color-dark), 0.1);
        background-color: hsl(var(--color-light));
        color: var(--color-headings);
        line-height: var(--line-height-p);
        letter-spacing: var(--tracking-tight);
        overflow: auto;

        & code {
            padding: 2px 0;
            color: inherit;
            font-weight: inherit;
            letter-spacing: inherit;
        }
    }
}

@media (min-width: 1024px) {
    .page-content {
        padding: var(--spacing-md);
        max-width: 970px;
    }
}

.site-theme-dark {

    & .docs-page {
        background-color: #252525;
        border-color: #111111;
    }

    & .page-content {

        & h1, h2 {
            border-bottom-color: hsla(var(--color-light), 0.15);
        }

        & code {
            background-color: hsla(var(--color-light), 0.1);
        }

        & pre {
            border-color: hsla(var(--color-light), 0.1);
            background-color: hsl(var(--color-dark));
        }
    }
}

/* alert box */

.alert-box {
    --alert-box-bg-color: hsla(var(--color-dark), 0.1);
    --alert-box-border-color: hsla(var(--color-dark), 0.3);
    --alert-box-icon-color: hsl(var(--color-dark));
    display: block;
    margin: var(--spacing-sm) 0;
    padding: var(--spacing-sm);
    border-radius: var(--rounded);
    border: 2px solid var(--alert-box-border-color);
    background-color: var(--alert-box-bg-color);

    &:is(.alert-info) {
        --alert-box-bg-color: hsla(var(--color-blue), 0.1);
        --alert-box-border-color: hsla(var(--color-blue), 0.3);
        --alert-box-icon-color: hsl(var(--color-blue));
    }

    & p {
        font-weight: 500;
    }

    & hr {
        display: block;
        width: 100%;
        height: 2px;
        margin: var(--spacing-2) 0;
        box-shadow: none;
        border: none;
        background-color: var(--alert-box-border-color);
    }

    & .alert-header {
        display: flex;
        align-items: center;
        gap: var(--spacing-1);
        margin-bottom: var(--spacing-2);

        & h3 {
            margin: 0;
        }

        & i {
            color: var(--alert-box-icon-color);
            font-size: 2rem;
        }
    }
}

/* image box */

figure.image-box {
    display: block;
    width: 100%;
    margin: var(--spacing-sm) 0;
    
    & .image-wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-sm);
        padding: var(--spacing-1-5);
        border-radius: var(--rounded);
        border: 2px solid hsla(var(--color-dark), 0.1);

        & img {
            border-radius: var(--rounded-sm);
        }
    }

    & figcaption {
        display: block;
        margin-top: var(--spacing-1-5);
        text-align: center;
        color: var(--color-text);
        font-size: var(--text-sm);
        font-style: italic;
        letter-spacing: var(--tracking-tight);
        opacity: 0.6;
    }
}

.site-theme-dark figure.image-box {

    & .image-wrapper {
        border-color: hsla(var(--color-light), 0.1);
    }
}

/* list box */

.list-box {
    --list-box-bg: hsl(var(--color-white));
    --list-box-border: hsl(var(--color-dark), 0.1);
    padding: var(--spacing-sm);
    border-radius: var(--rounded);
    border: 2px solid var(--list-box-border);
    background-color: var(--list-box-bg);
}

.site-theme-dark .list-box {
    --list-box-bg: hsl(var(--color-dark));
    --list-box-border: hsl(var(--color-light), 0.1);
}

/* steps */

ul.list-steps {
    list-style: none;
    display: flex;
    flex-flow: column;
    gap: var(--spacing-1-5);

    & li {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        align-items: center;
        letter-spacing: var(--tracking-tight);
        color: var(--color-text);

        & b, strong {
            color: var(--color-headings);
        }

        & .step-nbr {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 2rem;
            height: 2rem;
            margin-right: var(--spacing-1);
            border-radius: var(--rounded-full);
            border: 2px solid var(--color-headings);
            color: var(--color-headings);
            font-weight: bold;
        }

        & ul {
            display: flex;
            flex-flow: column;
            gap: var(--spacing-1-5);
            width: 100%;
            margin-top: var(--spacing-1-5);

            & li {

                & .step-nbr {
                    border: none;
                    width: 1.5rem;
                    height: unset;
                    margin-right: 7px;
                    font-weight: 600;
                }
            }
        }
    }
}


/* ----- Table of Contents ----- */

.page-table-of-content {
    display: none;

    & nav.toc-menu {
        width: 400px;
        padding: var(--spacing-sm);
        border-radius: var(--rounded);
        background-color: hsl(var(--color-light));

        & ul {
            display: flex;
            flex-flow: column;
            gap: var(--spacing-1-5);
            list-style: none;
            padding: 0;

            & li {
                position: relative;
                display: flex;
                align-items: center;
                color: var(--color-headings);
                letter-spacing: var(--tracking-tight);

                &:before {
                    content: '';
                    display: inline-block;
                    width: 4px;
                    height: 4px;
                    margin-right: var(--spacing-1);
                    border-radius: 8px;
                    background-color: var(--color-headings);
                    opacity: 0.5;
                    transition: opacity 250ms ease;
                }

                &:has(a:hover):before {
                    opacity: 1;
                }

                &:is(.active) {

                    &:before, a {
                        opacity: 1;
                    }
                }

                & a {
                    color: inherit;
                    text-decoration: none;
                    font-weight: normal;
                    opacity: 0.5;
                    transition: all 250ms ease;

                    &:hover {
                        opacity: 1;
                    }
                }
            }
        }
    }
}

@media (min-width: 1790px) {
    .content-wrapper {
        position: relative;
        overflow: clip;
    }

    .page-table-of-content {
        position: absolute;
        top: 250px;
        left: 970px;
        display: block;
        height: 100%;

        & nav.toc-menu {
            position: sticky;
            top: var(--spacing-sm);
        }
    }
}

.site-theme-dark .page-table-of-content nav.toc-menu {
    background-color: #191919;
}


/* ----- Header ----- */

header.page-header {
    display: none;
}

@media (min-width: 1024px) {
    header.page-header {
        display: flex;
        align-items: center;
        padding: var(--spacing-sm) var(--spacing-md);
        border-bottom: 2px solid hsla(var(--color-dark), 0.15);
    }
}

nav.menu-header {
    width: 100%;
    margin-left: auto;

    & ul {
        list-style: none;
        display: flex;
        align-items: center;
        justify-content: end;
        flex-wrap: wrap;
        gap: var(--spacing-4);

        & li {

            &:is(.menu-item) {
                color: var(--color-headings);
                font-weight: 500;
                letter-spacing: var(--tracking-tight);

                & a {
                    color: inherit;
                    text-decoration: none;
                    transition: all 325ms ease;

                    &:hover {
                        color: hsl(var(--color-blue));
                    }
                }
            }
            
            &:is(.sep-menu-item) {
                display: inline-block;
                width: 2px;
                height: var(--spacing-3);
                background-color: hsla(var(--color-dark), 0.15);
            }
        }
    }
}

@media (max-width: 1460px) {
    nav.menu-header ul li {

        &:nth-child(2),
        &:nth-child(3) {
            display: none;
        }
    }
}

.site-theme-dark {

    & header.page-header {
        border-bottom-color: hsla(var(--color-light), 0.1);
    }

    & nav.menu-header ul li.sep-menu-item {
        background-color: hsla(var(--color-light), 0.1);
    }
}

/* theme - toggle switch */

.toggle-switch {
    position: relative;
    display: flex;
    align-items: center;
    width: 66px;
    height: 33px;
    border-radius: var(--rounded-full);
    background-color: hsla(var(--color-dark), 0.1);
    cursor: pointer;
    z-index: 1;

    &:before {
        content: '';
        position: relative;
        left: 6px;
        display: block;
        width: 24px;
        height: 24px;
        border-radius: var(--rounded-full);
        background-color: hsl(var(--color-white));
        box-shadow: 0px 6px 16px hsl(var(--color-dark), 0.2);
        transition: all 200ms ease;
        z-index: 2;
    }

    &:has(#theme-dark:checked) {
        background-color: hsla(var(--color-white), 0.1);

        &:before {
            transform: translateX(30px);
            background-color: hsl(var(--color-dark));
        }

        & #theme-dark:checked + label {
            color: hsl(var(--color-light));
            opacity: 1; 
        }

        & label {
            color: hsla(var(--color-white));
            opacity: 0.1;

            &:hover {
                opacity: 0.5;
            }
        }
    }

    &:has(#theme-light:checked) {

        & #theme-light:checked + label {
            opacity: 1;
        }
    }

    & input[type="radio"] {
        display: none;

        &:checked + label {
            color: var(--color-headings);
        }
    }

    & label {
        position: absolute;
        z-index: 3;
        color: hsl(var(--color-dark));
        opacity: 0.25;
        transition: all 200ms ease;

        &:hover {
            opacity: 0.5;
        }

        & i {
            color: inherit;
            font-size: 15px;
            cursor: pointer;
        }
    }

    & #theme-light {

        & + label {
            left: 10px;
        }
    }

    & #theme-dark {

        & + label {
            right: 10px;
        }
    }
}

/* search bar */

.content-search {
    position: relative;
    flex-shrink: 2;
    width: 100%;

    & .input-ghost {
        position: relative;
        margin-left: calc(-1 * var(--spacing-1-5));

        & label {
            display: none;
        }

        & i {
            position: absolute;
            top: 15px;
            left: 15px;
            font-size: 18px;
            color: var(--color-headings);
            transition: color 325ms ease;
        }

        & input[type="search"] {
            width: 100%;
            height: 48px;
            padding-left: var(--spacing-4);
            padding-right: var(--spacing-1-5);
            border: 2px solid hsla(var(--color-light-gray), 0);
            border-radius: var(--rounded-sm);
            background-color: hsla(var(--color-light), 0);
            box-shadow: none;
            font-weight: 500;
            color: var(--color-headings);
            outline: none;
            transition: all 325ms ease;

            &:hover,
            &:focus {
                border-color: hsl(var(--color-light-gray));
                background-color: hsla(var(--color-light), 1);
            }

            &:focus {
                border-color: hsla(var(--color-blue), 0.5);
            }
        }

        &:has(input[type="search"]:focus) {

            & i {
                color: hsl(var(--color-blue));
            }
        }
    }

    & #results {
        position: absolute;
        top: 100%;
        left: -15px;
        display: block;
        width: calc(100% + 15px);
        margin-top: 5px;
        padding: 15px;
        border-radius: var(--rounded);
        border: 2px solid hsla(var(--color-dark), 0.1);
        background-color: hsl(var(--color-light));
        color: var(--color-text);
        font-size: var(--text-sm);
        opacity: 0;
        visibility: hidden;
        transform: scale(0.95);
        transition: all 175ms ease;
        z-index: 10;

        &:is(.open) {
            opacity: 1;
            visibility: visible;
            transform: scale(1);
        }

        & a {
            display: block;
            padding: 15px;
            border-radius: var(--rounded-sm);
            background-color: hsla(var(--color-dark), 0.05);
            color: var(--color-text);
            text-decoration: none;
            transition: all 325ms ease;

            &:hover {
                background-color: hsla(var(--color-blue), 0.1);

                & .search-result-link {
                    border-top-color: hsl(var(--color-blue), 0.2);
                    color: hsl(var(--color-blue));
                    opacity: 0.5;
                }
            }

            & p {
                margin-bottom: 5px;
            }

            & .search-result-link {
                display: block;
                width: 100%;
                margin-top: 10px;
                padding-top: 10px;
                border-top: 1px solid hsla(var(--color-dark), 0.2);
                opacity: 0.25;
                font-weight: 600;
                transition: all 325ms ease;
            }
        }
    }
}

.site-theme-dark .content-search {

    & .input-ghost {

        & input[type="search"] {
            
            &:hover,
            &:focus {
                border-color: hsla(var(--color-light), 0.35);
                background-color: hsla(var(--color-light), 0.1);
            }

            &:focus {
                border-color: hsla(var(--color-blue), 0.5);
            }
        }
    }

    & #results {
        border: 2px solid hsla(var(--color-light), 0.1);
        background-color: hsl(var(--color-dark));

        & .search-result-link {
            border-top-color: hsla(var(--color-light), 0.2);
        }
    }
}


/* ----- Footer ----- */

footer.docs-footer {
    margin-top: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);

    & a {
        color: inherit;
        font-weight: 600;
        text-decoration: none;
        transition: all 325ms ease;

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

    & .footer-copyright-text {
        color: hsl(var(--color-dark), 0.35);
        text-align: center;
        font-weight: 500;
        font-size: var(--text-sm);
        letter-spacing: var(--tracking-tight);

        & p {
            color: inherit;
        }
    }
}

@media (min-width: 1024px) {
    footer.docs-footer {
        margin-top: 0;
    }
}

.site-theme-dark footer.docs-footer {

    & .footer-copyright-text {
        color: hsl(var(--color-light), 0.35);
    }
}


/* ----- Sidebar ----- */

.docs-sidebar {
    background-color: transparent;

    & nav.menu-sidebar {
        --sb-menu-item-color: var(--color-headings);
        --sb-menu-item-color-h: var(--color-headings);
        --sb-menu-item-bg: transparent;
        --sb-menu-item-bg-h: hsla(var(--color-dark), 0.1);
        --sb-menu-item-icon-bg: transparent;
        --sb-menu-item-icon-bg-h: var(--color-headings);
        --sb-menu-item-icon-color: var(--color-headings);
        --sb-menu-item-icon-color-h: hsl(var(--color-white));
        margin-top: var(--spacing-sm);

        & ul {
            list-style: none;
            display: flex;
            flex-flow: column;
            gap: var(--spacing-1-5);
            padding: 0;

            & > li.menu-item {

                &:hover > a,
                &:is(.current-menu-item) > a {
                    gap: var(--spacing-1-5);
                    background-color: var(--sb-menu-item-bg-h);

                    & .menu-item-icon {
                        background-color: var(--sb-menu-item-icon-bg-h);
                        color: var(--sb-menu-item-icon-color-h);
                    }
                }

                & > a {
                    padding: 4px;
                    border-radius: 20px 10px 10px 20px;
                    background-color: transparent;

                    & .menu-item-icon {
                        flex-shrink: 0;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        width: var(--spacing-4);
                        height: var(--spacing-4);
                        border-radius: var(--rounded-full);
                        background-color: var(--sb-menu-item-icon-bg);
                        color: var(--sb-menu-item-icon-color);
                        font-size: 18px;
                        font-weight: normal;
                        transition: all 225ms ease;
                    }
                }
            } 

            & li.menu-item {
                font-weight: 500;
                letter-spacing: var(--tracking-tight);
                color: var(--sb-menu-item-color);

                & a {
                    display: flex;
                    align-items: center;
                    gap: 0;
                    color: inherit;
                    text-decoration: none;
                    transition: all 225ms ease;
                }

                & ul.sub-menu {
                    margin-top: var(--spacing-1);
                    padding-left: var(--spacing-md);

                    & li {
                        position: relative;
                        color: var(--color-text);
                        font-weight: normal;
                        font-size: var(--text-sm);

                        &:before {
                            content: '\ea61';
                            position: absolute;
                            top: 2px;
                            left: -20px;
                            color: inherit;
                            font-family: 'tabler-icons';
                            font-weight: normal;
                            opacity: 0;
                        }

                        &:is(.current-menu-item) {
                            font-weight: 600;
                            color: var(--sb-menu-item-color-h);

                            &:before {
                                opacity: 1;
                            }
                            
                            & a {
                                border-bottom: none;
                            }
                        }

                        & a {
                            display: inline;
                            padding-bottom: 1px;
                            border-bottom: 1px solid transparent;

                            &:hover {
                                color: var(--color-headings);
                                border-bottom-color: var(--color-headings);
                            }
                        }
                    }
                }
            }
        }
    }
}

@media (max-width: 1024px) {
    .docs-sidebar nav.menu-sidebar ul {

        & > li.menu-item > a {
            max-width: 280px;
        }
    }
}

.site-theme-dark .docs-sidebar nav.menu-sidebar {
    --sb-menu-item-bg-h: hsla(var(--color-light), 0.1);
    --sb-menu-item-icon-color-h: hsl(var(--color-dark));
}

.brand-box {
    display: block;
    width: 100%;
    max-width: 115px;
    margin: auto;
    padding: 8px 10px;
    border-radius: 0 0 var(--rounded-sm) var(--rounded-sm);
    background: linear-gradient(180deg, hsl(var(--color-dark)) 0%, #444444 100%);

    & img, svg {
        width: 100%;
        max-width: 95px;
    }
}

@media (min-width: 1024px) {
    .brand-box {
        max-width: unset;
        margin: 0;
        padding: var(--spacing-1-5) var(--spacing-2);
        border-radius: var(--rounded-lg);

        & img, svg {
            max-width: unset;
        }
    }
}

.site-theme-dark .brand-box {
    background: linear-gradient(180deg, hsl(var(--color-light)) 0%, hsl(var(--color-light-gray)) 100%);
}

.brand {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    z-index: 10;
    
    & .brand-box {
        margin: 0 auto;
    }

    & button.sidebar-menu-toggle,
    & button.search-mobile-toggle {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--spacing-4);
        height: var(--spacing-4);
        border-radius: var(--rounded-full);
        border: none;
        background-color: transparent;
        color: var(--color-headings);
        font-size: 24px;
        transition: all 325ms ease;

        &:is(.open) {
            background-color: var(--color-headings);
            color: hsl(var(--color-light));
        }
    }

    & .search-mobile-dropdown {

        & .search-dropdown {
            display: none;
            position: fixed;
            top: 60px;
            left: 0;
        }
    }
}

@media (min-width: 1024px) {
    .brand {

        & button.sidebar-menu-toggle,
        & button.search-mobile-toggle {
            display: none;
        }
    }
}

.site-theme-dark .brand {
    
    & button.sidebar-menu-toggle,
    & button.search-mobile-toggle {

        &:is(.open) {
            color: hsl(var(--color-dark));
        }
    }
}