/* Styles for the sidebar (see sidebar.js). The colors come from screen.css. */

:root {
    --sidebar-width: 256px;
    --nav-item-height: 32px;
    --nav-indent: 35px;
}

.sidebar-container *, .mobile-topbar * {
    margin: 0;
    padding: 0;
    font-family: var(--font-sans);
}

.sidebar-container {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    height: 100vh;
}

.sidebar-container .sidebar-fixed {
    position: fixed;
    display: flex;
    flex-direction: column;
    width: var(--sidebar-width);
    height: 100vh;
    border-right: 1px solid var(--border);
    background-color: var(--surface);
}

.sidebar-container svg.icon {
    height: 1em;
    fill: currentColor;
    flex-shrink: 0;
}

/* ===== Search ===== */

.searchbar-container {
    position: relative;
    display: flex;
    gap: 6px;
    padding: 10px;
    border-bottom: 1px solid var(--border);
}

/* The button that collapses the sidebar */
.sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: none;
    color: var(--text-faint);
    font-size: 17px;
    cursor: pointer;
}

.sidebar-toggle:hover {
    background-color: var(--hover-bg);
    color: var(--text);
}

.searchbar-container > .searchbar {
    display: flex;
    flex: 1;
    min-width: 0;
    align-items: center;
    height: 34px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background-color: var(--input-bg);
}

.searchbar-container > .searchbar:focus-within {
    border-color: rgba(140, 184, 255, 0.6);
}

.searchbar > svg {
    margin-left: 10px;
    color: var(--text-faint);
    font-size: 13px;
}

.searchbar > input {
    flex: 1;
    min-width: 0;
    height: 100%;
    margin-left: 8px;
    border: none;
    outline: none;
    background-color: transparent;
    color: var(--text);
    font-size: 14px;
}

.searchbar > input::placeholder {
    color: var(--text-faint);
}

.searchbar > .search-shortcut {
    margin-right: 8px;
    padding: 0 6px;
    border-radius: 4px;
    border: 1px solid var(--border-strong);
    color: var(--text-faint);
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 16px;
}

.searchbar:focus-within > .search-shortcut {
    display: none;
}

.search-results {
    display: none;
    position: absolute;
    top: calc(100% - 6px);
    left: 10px;
    right: 10px;
    z-index: 10;
    max-height: 70vh;
    overflow-y: auto;
    border-radius: var(--radius);
    border: 1px solid var(--border-strong);
    background-color: var(--surface-raised);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.search-results.open {
    display: block;
}

.search-result {
    display: block;
    padding: 8px 11px;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
}

.search-result:last-child {
    border-bottom: none;
}

.search-result.active, .search-result:hover {
    background-color: var(--accent-bg);
}

.search-result-title {
    color: var(--text);
    font-family: var(--font-mono) !important;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.search-result-info {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* "Recent" above what was opened lately */
.search-heading {
    padding: 8px 11px 2px;
    color: var(--text-faint);
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* How to use the results with the keyboard */
.search-hints {
    padding: 6px 11px;
    border-top: 1px solid var(--border);
    color: var(--text-faint);
    font-size: 11px;
}

.search-hints kbd {
    margin: 0 2px;
    padding: 0 4px;
    border: 1px solid var(--border-strong);
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 10px;
}

.search-hints kbd + kbd {
    margin-left: 0;
}

@media (pointer: coarse) {
    .search-hints {
        display: none;
    }
}

.search-empty {
    padding: 10px 12px;
    color: var(--text-muted);
    font-size: 13px;
}

/* ===== Navigation ===== */

.navbar-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.navbar-container > .header-text {
    margin: 14px 18px 6px;
    color: var(--text-faint);
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.navbar-container .navbar-padding {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 8px 8px;
}

.navbar-container .navbar-footer {
    padding: 6px 8px 8px;
    border-top: 1px solid var(--border);
}

.navbar-container .navbar-button {
    display: flex;
    flex-direction: column;
    margin-top: 2px;
}

.navbar-container .indent {
    padding-left: var(--nav-indent);
}

.navbar-button .navbar-title {
    display: flex;
    align-items: center;
    width: 100%;
    height: var(--nav-item-height);
    border: none;
    background: none;
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 15px;
    text-decoration: none;
    cursor: pointer;
}

.navbar-button .navbar-title:hover {
    background-color: var(--hover-bg);
    color: var(--text);
}

.navbar-button .navbar-title.active {
    background-color: var(--accent-bg);
    color: var(--accent);
    font-weight: bold;
}

.navbar-button .navbar-title input[type=checkbox] {
    display: none;
}

/* Every icon gets the same width, so the names next to them line up */
.navbar-button .navbar-title .navbar-icon {
    width: 18px !important;
    margin-left: 10px;
}

.navbar-button .navbar-title .navbar-title-text {
    margin-left: 12px;
    pointer-events: none;
    user-select: none;
}

/* Dropdowns, like Code and Examples */
.navbar-dropdown > .navbar-title {
    justify-content: space-between;
}

.spacer {
    flex: 1;
}

.dropdown-indicator {
    margin-right: 12px;
    font-size: 12px;
}

.navbar-title:has(input[type=checkbox]:checked) .open-i, .navbar-title:has(input[type=checkbox]:not(:checked)) .closed-i {
    display: block;
}

.navbar-title:has(input[type=checkbox]:checked) .closed-i, .navbar-title:has(input[type=checkbox]:not(:checked)) .open-i {
    display: none;
}

.navbar-button .navbar-children {
    display: none;
    position: relative;
}

.navbar-title:has(input[type=checkbox]:checked) + .navbar-children {
    display: block;
}

/* The line down the left of a dropdown's pages, centered under the icons above it */
.navbar-children > .sidebar-sideline {
    position: absolute;
    top: 6px;
    bottom: 4px;
    left: calc(var(--nav-indent) - 17px);
    width: 2px;
    border-radius: 2px;
    background-color: var(--border-strong);
}

/* The light and dark button shows a sun in dark mode, and a moon in light mode */
:root[data-theme="light"] .theme-icon-sun, :root:not([data-theme="light"]) .theme-icon-moon {
    display: none;
}

/* ===== Collapsed: just the icons (see setUpCollapsing in sidebar.js) =====
   The icons are in the same place whether the sidebar is open or collapsed, so only the width changes. Everything else
   fades or folds away while the sidebar shrinks, and the sidebar clips whatever is still sticking out. */

.sidebar-container .sidebar-fixed {
    overflow: hidden;
}

/* Names never wrap while the sidebar is narrowing. They're cut off at the edge instead. */
.navbar-button .navbar-title, .navbar-button .navbar-title .navbar-title-text {
    white-space: nowrap;
}

/* The search bar keeps its size and is cut off, instead of being squeezed */
.searchbar-container > .searchbar {
    min-width: 180px;
}

/* Search is an icon while collapsed, since the search bar doesn't fit. It sits on top of the "Docs" label, and the two
   fade into each other, so nothing changes height and the rest of the list doesn't move. */
.navbar-container {
    position: relative;
}

.navbar-search-button {
    position: absolute;
    top: 1px;
    left: 8px;
    right: 8px;
    margin-top: 0 !important;
    opacity: 0;
    visibility: hidden;
}

/* Open dropdowns fold up while collapsing, and back down while opening. --open-height is how tall each one really is
   (set by setSidebarCollapsed in sidebar.js), so the fold moves the whole time instead of starting late. */
.navbar-container .navbar-children {
    max-height: var(--open-height, 600px);
    overflow: hidden;
}

body.sidebar-animate .sidebar-container, body.sidebar-animate .sidebar-container .sidebar-fixed {
    transition: width 0.15s, min-width 0.15s;
}

body.sidebar-animate .searchbar,
body.sidebar-animate .navbar-title-text,
body.sidebar-animate .dropdown-indicator {
    transition: opacity 0.15s;
}

body.sidebar-animate .navbar-container > .header-text,
body.sidebar-animate .navbar-search-button {
    transition: opacity 0.15s, visibility 0.15s;
}

body.sidebar-animate .navbar-children {
    transition: max-height 0.15s, opacity 0.15s;
}

@media (min-width: 801px) {
    body.sidebar-collapsed {
        --sidebar-width: 55px;
    }

    body.sidebar-collapsed .searchbar,
    body.sidebar-collapsed .navbar-title-text,
    body.sidebar-collapsed .dropdown-indicator {
        opacity: 0;
        pointer-events: none;
    }

    body.sidebar-collapsed .search-results {
        display: none !important;
    }

    body.sidebar-collapsed .navbar-container > .header-text {
        opacity: 0;
    }

    body.sidebar-collapsed .navbar-search-button {
        opacity: 1;
        visibility: visible;
    }

    body.sidebar-collapsed .navbar-container .navbar-children {
        max-height: 0;
        opacity: 0;
    }

    /* On a page inside Engine, Guides, or Examples, that icon is lit up */
    body.sidebar-collapsed .navbar-dropdown:has(a.active) > .navbar-title {
        background-color: var(--accent-bg);
        color: var(--accent);
    }
}

/* ===== Phones: a top bar with a menu button, and the sidebar slides in ===== */

.mobile-topbar {
    display: none;
}

.sidebar-overlay {
    display: none;
}

@media (max-width: 800px) {
    .mobile-topbar {
        display: flex;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 20;
        height: 48px;
        border-bottom: 1px solid var(--border);
        background-color: var(--surface);
    }

    .menu-button {
        display: flex;
        align-items: center;
        height: 100%;
        padding: 0 16px;
        border: none;
        background: none;
        color: var(--text-muted);
        font-size: 20px;
        cursor: pointer;
    }

    .menu-button svg.icon {
        height: 1em;
        fill: currentColor;
    }

    .mobile-title {
        color: var(--text);
        font-size: 17px;
        font-weight: bold;
        text-decoration: none;
    }

    /* The sidebar slides in over the page instead of taking up space next to it */
    .sidebar-container {
        width: 0;
        min-width: 0;
        height: 0;
    }

    .sidebar-container .sidebar-fixed {
        top: 0;
        left: 0;
        z-index: 30;
        height: 100dvh;
        transform: translateX(-100%);
        transition: transform 0.2s;
    }

    body.sidebar-open .sidebar-container .sidebar-fixed {
        transform: none;
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
    }

    body.sidebar-open .sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 25;
        background-color: rgba(0, 0, 0, 0.5);
    }

    .searchbar > .search-shortcut, .sidebar-toggle {
        display: none;
    }

    .searchbar > input {
        font-size: 16px; /* Smaller than 16px makes phones zoom in when the search bar is tapped */
    }
}