@use "./base.scss";
@use "./variables.scss" as *;

// Callouts design
.text-highlight {
    background-color: #ddcee5;
}

:root[saved-theme="dark"] .text-highlight {
    background-color: #7d4e95;
}

.callout {
    border: 3px solid #885a9f;
    background-color: initial;
    border-radius: 1rem;
}

.callout-title {
    --color: #885a9f;
}

:root[saved-theme="dark"] .callout {
    border: 3px solid #a672c0;
}

:root[saved-theme="dark"] .callout-title {
    --color: #a672c0;
}

.callout.note {
    & table {
        margin: 0;
        margin-bottom: 0.5rem;

        & thead {
            display: none;
        }

        & td {
            padding: 0;
        }
    }
}

table {
    border: 2px solid var(--gray);

    & thead > tr {
        border-bottom: 2px solid var(--lightgray);

        & th {
            border: 1px solid var(--lightgray);
        }
    }

    & td {
        border: 1px solid var(--lightgray);
    }
}

.usage {
    display: flex;
    flex-direction: row;
    align-items: center;

    & p {
        margin: 0;
    }

    & .box {
        border: 1px solid var(--darkgray);
        border-radius: 0.5rem;
        padding: 0.2rem 0.3rem 0.2rem 0.3rem;
        display: inline-block;
        width: fit-content;
        margin: 0.2rem;
    }

    & .left {
        padding-right: 1.7rem;
    
        background-image: linear-gradient(var(--darkgray), var(--darkgray)), linear-gradient(var(--darkgray), var(--darkgray));
        background-repeat: no-repeat;
        background-size: 8px 2px;
        background-position: top right, bottom right;
    
        border-right: solid var(--darkgray);
        border-width: 0 2px;
    }

    & .right {
        padding-left: 1rem;
    }

    & .r {
        margin-left: 0.25rem;
        margin-right: 0.25rem;
    }

    & .ileft {
        padding-left: 1.7rem;
    
        background-image: linear-gradient(black, black), linear-gradient(black, black);
        background-repeat: no-repeat;
        background-size: 8px 2px;
        background-position: top left, bottom left;
    
        border-left: solid black;
        border-width: 0 2px;
    }
    
    & .iright {
        padding-right: 1rem;
    }
}


// Bigger popover
.popover {

    & > .popover-inner {
      width: 30rem;
      max-height: 25rem;
    }
}

// Hide buttons
.explorer button.desktop-explorer, button.toc-header {
    display: none;
}

.page .page-header {
    margin-top: 0;
    width: initial;
}


.page {

    @media all and not ($mobile) {

        max-width: unset;

        & > #quartz-body {

            grid-template: none;
            display: flex;
            justify-content: center;
            gap: 0;

            .breadcrumb-container {
                margin-top: 1.25rem;
            }

            hr {
                margin: 1rem auto;
            }

            footer {
                margin-bottom: 1rem;

                & p {
                    font-size: 1rem;
                }
            }

            ul.overflow, ol.overflow {
                max-height: initial;
            }

            ul.overflow::after, ol.overflow::after {
                position: initial;
            }

            ul.toc-content.overflow {
                & > li > a {
                    opacity: 0.75;
                }
            }

            & .center, & footer {

                @media all and ($desktop) {
                    width: initial;
                    min-width: unset;
                    max-width: 650px;
                    margin-left: unset;
                    margin-right: unset;
                }
                @media all and ($maxDesktop) {
                    width: 950px;
                    min-width: unset;
                    max-width: unset;
                    margin-left: unset;
                    margin-right: unset;
                }
            }

            & .center {

                @media all and ($desktop) {
                    padding-left: 1.5rem;
                    padding-right: 1.5rem;
                }
                @media all and ($maxDesktop) {
                    padding-left: 3.5rem;
                    padding-right: 3.5rem;
                }

                & p {
                    font-size: 1.15rem;
                    white-space: break-spaces;
                    hyphens: none;
                }

                & footer p {
                    font-size: 1rem;
                }

                & footer li {
                    font-size: 1rem;
                }
                
                & li {
                    font-size: 1.15rem;
                }
                
                & h1 {
                    font-size: 2rem;
                    margin-top: 0.65rem;
                }

                & h2 {
                    font-size: 1.7rem;
                }

                & h3 {
                    font-size: 1.5rem;
                }

                & h4 {
                    font-size: 1.3rem;
                }
            }

            & .page-header {
                margin-top: 0;
            }

            & .sidebar {
                gap: 1rem;
                margin-top: 1.25rem;
                padding-top: 0rem;

                @media all and ($desktop)
                {
                    width: 300px;
                    min-width: 300px;
                }
                @media all and ($maxDesktop)
                {
                    gap: 0rem;
                    min-width: 300px;
                    width: 370px;
                    padding: 0 3rem;
                }
            }

            & .sidebar.left {
                height: 100vh;
                margin-top: 0;
                margin-bottom: 0;
                padding-bottom: 0;
                overflow-y: scroll;

                @media all and ($desktop)
                {
                    padding-left: 1rem;
                    padding-right: 0;
                }
                @media all and ($maxDesktop)
                {
                    padding-left: 2rem;
                    padding-right: 0;
                }

                .page-title {
                    margin-top: 0.5rem;
                }

                .explorer-content {
                    max-height: none;
                    margin-top: .5rem;
                    list-style: none;
                    transition: max-height .35s;
                    overflow: hidden;
                }

                .explorer {
                    flex-direction: unset;
                    flex: unset;
                    min-height: unset;
                    display: initial;
                    overflow-y: unset;
                }
            }

            & .sidebar.right {
                gap: 1rem;
                flex-direction: row;
                flex-wrap: wrap;
                padding-top: 1rem;

                @media all and ($desktop)
                {
                    margin-top: 0;
                    padding-left: 0;
                    padding-right: 1rem;
                }
                @media all and ($maxDesktop)
                {
                    margin-top: 0;
                    padding-left: 0;
                    padding-right: 2rem;
                }

                & > * {
                    @media all and ($maxDesktop) {
                        flex: unset;
                        min-width: fit-content;
                    }
                }

                // Align dark mode and search
                .darkmode {
                    margin: unset;
                    margin-top: 0.25rem;
                }

                .search {
                    height: fit-content;
                    min-width: fit-content;
                    max-width: 14rem;
                    flex-grow: .3;
                    width: 10rem;
                }

                .toc {
                    max-height: 100%;
                    overflow-y: hidden;
                    height: 100%;
                    width: inherit;
                }
            }
        }
    }
}

.page {

    @media all and ($mobile) {

        h1 {
            margin-top: 0;
        }

        .darkmode {
            padding-top: 0.5rem;
        }

        footer {
            margin-bottom: 0;
        }

    }
}



// folder listing
.page {

    & > #quartz-body {

        & .page-listing {

            & p {
                font-size: 1rem;
            }

            & h3 {
                font-size: 1rem;
            }

            & ul.section-ul {
                margin-top: 0;
            }

            & li.section-li {
                margin-bottom: 0;
            }
        }
    }
}