/* CSS for UI elements (a.k.a. chrome) */

html {
    scrollbar-color: var(--scrollbar) var(--bg);
}

#searchresults a,
.content a:link,
a:visited,
a > .hljs {
    color: var(--links);
}

/*
    body-container is necessary because mobile browsers don't seem to like
    overflow-x on the body tag when there is a <meta name="viewport"> tag.
*/
#body-container {
    /*
        This is used when the sidebar pushes the body content off the side of
        the screen on small screens. Without it, dragging on mobile Safari
        will want to reposition the viewport in a weird way.
    */
    overflow-x: clip;
    max-width: 1600px;
    margin: 0 auto;
}

#sidebar-and-content {
    display: flex;
    height: calc(100vh - var(--menu-bar-height));
    width: 100%;
    overflow: hidden;
}

/* Menu Bar */

#logo {
    height: 32px;
    text-decoration: none;
    color: var(--fg);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
}

#logo img {
    height: 32px;
}

html.dark #logo .light {
    display: none;
}

html.light #logo .dark {
    display: none;
}

#logo aside {
    margin-left: 16px;
    font-size: 80%;
}

#menu-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 0 2rem;
    border-bottom: 2px solid var(--sidebar-spacer);
    gap: 16px;
    height: 64px;
}

#menu-bar i, #menu-bar .icon-button {
    position: relative;
    padding: 0 8px;
    z-index: 10;
    line-height: var(--menu-bar-height);
    cursor: pointer;
    transition: color 0.5s;
}

@media only screen and (max-width: 420px) {
    #menu-bar i, #menu-bar .icon-button {
        padding: 0 5px;
    }
}

.icon-button {
    border: none;
    background: none;
    padding: 0;
    color: inherit;
}

.icon-button i {
    margin: 0;
}

.menu-bar,
.menu-bar:visited,
.menu-bar .icon-button,
.menu-bar a i {
    color: var(--icons);
}

.menu-bar i:hover,
.menu-bar .icon-button:hover {
    color: var(--icons-hover);
}

/* Nav Icons */

.nav-chapters {
    width: 100%;
    display: flex;
    gap: 16px;
    margin-top: 48px;
}

.nav-chapter {
    box-sizing: border-box;
    width: 100%;
    border: 2px solid var(--sidebar-spacer);
    padding: 16px;
    border-radius: 8px;
    transition: border 0.3s;
    align-items: center;

    display: flex;
    gap: 16px;
}

.nav-chapter:hover {
    border: 2px solid #7aa3cc;
}

.nav-chapter,
.nav-chapter a,
.nav-chapter a:visited {
    color: var(--fg) !important;
    text-decoration: none !important;
}

.nav-chapter > div {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.nav-chapter.previous > div {
    text-align: right;
}

.nav-chapter i {
    position: relative;
    font-size: 32px;
    top: 1px;
    left: 1px;
}

.nav-chapter .direction {
    font-size: 60%;
}

.nav-chapter .title {
    font-size: 120%;
}

/* Inline code */

:not(pre) > .hljs {
    padding: 0.1em 0.3em;
    border-radius: 3px;
    white-space: nowrap;
}

:not(pre):not(a) > .hljs {
    color: var(--inline-code-color);
    overflow-x: initial;
}

a:hover > .hljs {
    text-decoration: underline;
}

pre {
    position: relative;
}

pre > .buttons {
    position: absolute;
    z-index: 100;
    right: 0px;
    top: 2px;
    margin: 0px;
    padding: 2px 0px;

    color: var(--sidebar-fg);
    cursor: pointer;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.1s linear, opacity 0.1s linear;
}

pre:hover > .buttons {
    visibility: visible;
    opacity: 1
}

pre > .buttons :hover {
    color: var(--sidebar-active);
    border-color: var(--icons-hover);
    background-color: var(--theme-hover);
}

pre > .buttons i {
    margin-inline-start: 8px;
}

pre > .buttons button {
    cursor: inherit;
    margin: 0px 5px;
    padding: 3px 5px;
    font-size: 14px;

    border-style: solid;
    border-width: 1px;
    border-radius: 4px;
    border-color: var(--icons);
    background-color: var(--theme-popup-bg);
    transition: 100ms;
    transition-property: color, border-color, background-color;
    color: var(--icons);
}

@media (pointer: coarse) {
    pre > .buttons button {
        /* On mobile, make it easier to tap buttons. */
        padding: 0.3rem 1rem;
    }

    .sidebar-resize-indicator {
        /* Hide resize indicator on devices with limited accuracy */
        display: none;
    }
}

pre > code {
    display: block;
    padding: 1rem;
}

/* FIXME: ACE editors overlap their buttons because ACE does absolute
   positioning within the code block which breaks padding. The only solution I
   can think of is to move the padding to the outer pre tag (or insert a div
   wrapper), but that would require fixing a whole bunch of CSS rules.
*/
.hljs.ace_editor {
    padding: 0rem 0rem;
}

pre > .result {
    margin-block-start: 10px;
}

/* Search */

#searchresults a {
    text-decoration: none;
}

mark {
    border-radius: 2px;
    padding-block-start: 0;
    padding-block-end: 1px;
    padding-inline-start: 3px;
    padding-inline-end: 3px;
    margin-block-start: 0;
    margin-block-end: -1px;
    margin-inline-start: -3px;
    margin-inline-end: -3px;
    background-color: var(--search-mark-bg);
    transition: background-color 300ms linear;
    cursor: pointer;
}

mark.fade-out {
    background-color: rgba(0, 0, 0, 0) !important;
    cursor: auto;
}

#searchbar-wrapper {
    position: relative;
}

#searchbar-outer i.fa-search {
    position: absolute;
    top: -12px;
    left: 8px;
}

input[type=search]::-ms-clear {
    display: none;
    width: 0;
    height: 0;
}

input[type=search]::-ms-reveal {
    display: none;
    width: 0;
    height: 0;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    display: none;
}

#searchbar {
    padding: 16px;
    padding-left: 40px;
    border-radius: 8px;
    width: 250px;
    background: var(--searchbar-bg);
    color: var(--searchbar-fg);
    outline: none;
    border: 0;
    height: 40px;
}

.searchresults-header {
    font-weight: bold;
    font-size: 1em;
    padding-block-start: 18px;
    padding-block-end: 0;
    padding-inline-start: 5px;
    padding-inline-end: 0;
    color: var(--searchresults-header-fg);
}

ul#searchresults {
    list-style: none;
    padding-inline-start: 20px;
}

ul#searchresults li {
    margin: 10px 0px;
    padding: 2px;
    border-radius: 2px;
}

ul#searchresults li.focus {
    background-color: var(--searchresults-li-bg);
}

ul#searchresults span.teaser {
    display: block;
    clear: both;
    margin-block-start: 5px;
    margin-block-end: 0;
    margin-inline-start: 20px;
    margin-inline-end: 0;
    font-size: 0.8em;
}

ul#searchresults span.teaser em {
    font-weight: bold;
    font-style: normal;
}

/* Sidebar */

.sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    font-size: 0.875em;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    background-color: var(--sidebar-bg);
    color: var(--sidebar-fg);
    height: calc(100vh - var(--menu-bar-height));
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem 2rem;
}

.no-js .sidebar,
.js:not(.sidebar-resizing) .sidebar {
    transition: transform 0.3s; /* Animation: slide away */
}

.sidebar code {
    line-height: 2em;
}


.js .sidebar .sidebar-resize-handle {
    cursor: col-resize;
    width: calc(var(--sidebar-resize-indicator-width) - var(--sidebar-resize-indicator-space));
}

/* sidebar-hidden */
#sidebar-toggle-anchor:not(:checked) ~ .sidebar {
    transform: translateX(calc(0px - var(--sidebar-width) - var(--sidebar-resize-indicator-width)));
    z-index: -1;
}

.sidebar::-webkit-scrollbar {
    background: var(--sidebar-bg);
}

.sidebar::-webkit-scrollbar-thumb {
    background: var(--scrollbar);
}

/* sidebar-visible */

.chapter {
    list-style: none outside none;
    padding-inline-start: 0;
    line-height: 2.2em;
}

.chapter ol {
    width: 100%;
}

.chapter li {
    display: flex;
    color: var(--sidebar-non-existant);
}

.chapter li a {
    display: block;
    padding: 0;
    text-decoration: none;
    color: var(--sidebar-fg);
}

.chapter li a:hover {
    color: var(--sidebar-active);
}

.chapter li a.active {
    color: var(--sidebar-active);
}

.chapter li > a.toggle {
    cursor: pointer;
    display: block;
    margin-inline-start: auto;
    padding: 0 10px;
    user-select: none;
    opacity: 0.68;
}

.chapter li > a.toggle div {
    transition: transform 0.5s;
}

/* collapse the section */
.chapter li:not(.expanded) + li > ol {
    display: none;
}

.chapter li.chapter-item {
    line-height: 1.5em;
    margin-block-start: 0.6em;
}

.chapter li.expanded > a.toggle div {
    transform: rotate(90deg);
}

.spacer {
    width: 100%;
    height: 1px;
    margin: 5px 0px;
}

.chapter .spacer {
    background-color: var(--sidebar-spacer);
}

@media (-moz-touch-enabled: 1), (pointer: coarse) {
    .chapter li a {
        padding: 5px 0;
    }

    .spacer {
        margin: 10px 0;
    }
}

.section {
    list-style: none outside none;
    padding-inline-start: 20px;
    line-height: 1.9em;
}

/* Theme switch */
#switch-theme {
    cursor: pointer;
    background: 0;
    border: 0;
    opacity: 0.8;
    padding: 0.2rem;
    border-radius: 50%;
    position: relative;
    isolation: isolate;
}

#switch-theme svg {
    fill: var(--clr-foreground);
}

.toggle-circle {
    transition: transform 500ms ease-out;
    transform: translate(-13%, -7%);
}

.light .toggle-circle {
    transform: translateX(0%);
}

.toggle-sun {
    transform-origin: center center;
    /* 	transform: rotate(15deg); */
    transition: transform 750ms cubic-bezier(0.11, 0.14, 0.29, 1.32);
}

@keyframes pulseToLight {
    0% {
        transform: scale(0);
        opacity: 0.5;
    }
    10% {
        transform: scale(1);
    }
    75% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: scale(1);
    }
}

@keyframes pulseToDark {
    0% {
        transform: scale(0);
        opacity: 0.5;
    }
    10% {
        transform: scale(1);
    }
    75% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: scale(1);
    }
}

.light .toggle-sun {
    transform: rotate(150deg);
}

html.dark {
    --clr-foreground: #ffffff;
}

html.light {
    --clr-foreground: #000000;
}

:root {
    --sun-clr: #4f6178;
    --dark-clr: hsl(246, 23%, 16%);
    --light-clr: #fff;
    --moon-clr: #d0d5dc;
    --clr-background: var(--light-clr);
}

/* Tabs */

.tabbed-card,
.tabbed-card > div {
    display: none;
}

.tabbed-card.visible,
.tabbed-card > div.visible {
    display: block;
}

.tabbed-card {
    width: 100%;
    border-radius: 8px;
    border: 2px solid var(--sidebar-spacer);
}

.tabbed-card > nav {
    width: 100%;
    border-bottom: 2px solid var(--sidebar-spacer)
}

.tabbed-card > nav > ul {
    display: flex;
    padding: 0;
    flex-direction: row;
    gap: 24px;
    margin: 16px 16px;
}

.tabbed-card > nav > ul > li {
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: 2px solid transparent;
}

.tabbed-card > nav > ul > li.active {
    border-bottom: 2px solid var(--sidebar-active);
}

.tabbed-card > nav > ul > li:hover {
    border-bottom: 2px solid var(--fg);
    cursor: pointer;
}

.tabbed-card > nav > ul > li > i {
    margin-right: 8px;
}

.tabbed-card > div {
    margin: 16px;
}

.content figure .tabbed-card pre {
    max-width: unset;
}

code.hljs {
    border-radius: 8px;
}

pre code.hljs {
    padding: 16px;
}