/*── src/assets/styles/docs.css ── Docs viewer styles ──*
 │
 │ Copyright (c) 2024-2025 Deimonn (a.k.a. Nahuel S. Cisterna)
 │
 │ This file is licensed under the MIT License.
 │
 │ See https://deimonn.dev/license.txt for license information.
 │
 */

/* SPDX-License-Identifier: MIT */

/* Layout. */
main {
    display: flex;
}

/* Dark/light theme switching for shiki. */
html.sl-theme-dark .shiki, html.sl-theme-dark .shiki span {
    color: var(--shiki-dark) !important;
    background-color: var(--shiki-dark-bg) !important;
}

/* Sidebar. */
aside {
    width: 18em;
    height: 100%;
    padding-top: 1em;
    padding-left: 1em;
    padding-right: 1em;
    background-color: var(--sl-color-neutral-50);
    margin-top: auto;
    position: sticky;
    bottom: 0;

    /* Adjustments for small-to-medium screens. */
    @media (max-width: 1024px) {
        display: none;
        padding-top: 3em;
        margin-top: 0;
        position: fixed;
        bottom: auto;
        z-index: 900;
    }
}

/* Project title & home button flex. */
aside > div {
    display: flex;
}

/* Button that opens the sidebar. */
.dei-openaside {
    display: none;
    z-index: 1000;
    position: fixed;
    top: 8px;
    left: 8px;

    /* Display only on small-to-medium screens. */
    @media (max-width: 1024px) {
        display: block;
    }
}

/* Project title. */
.dei-projectname, .dei-projectname:visited, .dei-projectname:hover {
    font-family: Victor Mono, monospace;
    font-weight: bold;
    font-size: 1.05em;
    color: var(--sl-color-neutral-1000);
    text-decoration: none;
    margin: 8px;
}

/* GitHub button. */
.dei-projectrepo, .dei-projectrepo:visited {
    margin-top: auto;
    margin-bottom: auto;
    margin-left: auto;
    margin-right: 8px;
    font-size: 1.25em;
    color: var(--sl-color-neutral-1000);
}

.dei-projectrepo:hover {
    color: var(--sl-color-primary-700);
}

/* Home button. */
.dei-homebutton, .dei-homebutton:visited {
    margin-top: auto;
    margin-bottom: auto;
    margin-right: 8px;
    font-size: 1.25em;
    color: var(--sl-color-neutral-1000);
}

.dei-homebutton:hover {
    color: var(--sl-color-primary-700);
}

/* Navigation tree. */
.dei-navigation {
    margin-top: 1em;
    margin-bottom: 1em;
    padding-left: 1em;
    height: calc(100vh - 8em);
    overflow-y: scroll;

    /* Adjustments for small-to-medium screens. */
    @media (max-width: 1024px) {
        height: calc(100% - 10em);
    }
}

.dei-navigation > h2 {
    font-size: 1em;
    font-weight: normal;
    border-bottom: var(--sl-color-neutral-400) solid 1px;
}

.dei-navigation > li {
    list-style-type: none;
    padding: 4px;
    padding-left: 8px;
}

.dei-navigation > li > a {
    color: var(--sl-color-neutral-1000);
    text-decoration: none;
}

.dei-navigation > li > a:hover {
    color: var(--sl-color-primary-700);
}

/* Document render. */
.dei-document {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2em;
    margin-bottom: 4em;

    /* Adjust width on smaller screens. */
    @media (max-width: 1366px) {
        width: 60%;
    }

    @media (max-width: 1024px) {
        width: 75%;
    }
}

/* Table of contents. */
.dei-toc {
    width: 18em;
    height: 100%;
    margin-top: auto;
    margin-bottom: 3em;
    padding: 1em;
    position: sticky;
    right: 0;
    bottom: 0;

    /* Do not display it on small-to-medium screens. */
    @media (max-width: 1366px) {
        display: none
    }
}

.dei-toc > h2 {
    margin-top: 8px;
    font-weight: bold;
    font-size: 1.15em;
}

.dei-toccontent {
    height: calc(100vh - 5em);
    overflow-y: scroll;
}

/* Copy button. */
sl-copy-button {
    visibility: hidden;
    float: right;
    position: relative;
    height: 0;
}

.dei-copycode:hover sl-copy-button {
    visibility: visible;
}