_sass/pages/_docs-content.scss
@use 'sass:color';
@use '../abstracts/variables' as *;
@use '../abstracts/mixins' as *;

// Documentation content styles

body.documentation {

    // Main content typography
    main .wrap {

        // Headings
        h1,
        h2,
        h3,
        h4,
        h5 {
            a:hover {
                color: black;
                text-decoration: underline;
            }
            code {
                font-family: $fontMonoXBold;
            }
        }

        h1 {
            @include headline-1;
            margin-bottom: 20px;
            margin-top: 50px;

            code {
                font-size: 30px;
            }
        }

        h2 {
            @include headline-2;
            margin-bottom: 20px;
            margin-top: 40px;

            code {
                font-size: 27px;
            }
        }

        h3 {
            @include headline-3;
            margin-bottom: 10px;
            margin-top: 30px;

            code {
                font-family: $fontMonoXBold;
                font-size: 23px;
                padding: 2px 5px;
                font-weight: normal;
            }
        }

        h4,
        h5 {
            margin-bottom: 20px;
            margin-top: 40px;
        }

        h4 {
            @include title-1;

            code {
                font-size: 19px;
            }
        }

        h5 {
            @include title-2;

            code {
                font-size: 19px;
            }
        }

        // Content spacing
        p {
            margin: 15px 0;
        }

        // Spacing adjustments
        h4+.highlighter-rouge {
            margin-top: 5px;
        }

        p+h4,
        .highlighter-rouge+h4 {
            margin-top: 30px;
        }

        .highlighter-rouge+.highlighter-rouge,
        .highlighter-rouge+p,
        table+p {
            margin-top: 20px;
        }

        .highlighter-rouge+table {
            margin-top: 25px;
        }

        p+.highlighter-rouge,
        p+table {
            margin-top: 15px;
        }
        
        p + .monospace_table,
        div + .monospace_table{
            margin-top: 20px;
        }

        .limit-width {
            width: 100%;
        }

        // Image handling
        #main_content_wrap {
            img {
                width: 100%;
                height: auto;
                margin: 20px 0;
            }

            table {
                img {
                    width: auto;
                    height: auto;
                    margin: 0;
                    margin-bottom: -4px;
                }
            }

            table a.nobg:hover {
                background: none;
                display: inline-block;
            }

            .sidenav ul ul {
                padding-left: 20px;
                margin-top: 0;
                margin-bottom: 8px;
            }
        }
    }

    // Links
    .headlinebar a,
    .wrap a {
        color: var(--text-primary-color);
        text-decoration: underline;
        transition: color .3s;

        &:hover {
            color: $blue;
        }
    }

    // Basic text elements
    a {
        text-decoration: none;
        color: var(--main-text-primary-color, #0D0D0D);
        text-shadow: none;
        transition: color 0.5s ease, text-shadow 0.5s ease;

        &:focus,
        &:hover {
            text-decoration: underline;
        }
    }

    strong {
        font-family: $fontSans;
        font-weight: 600;
    }

    p {
        @include body-standard;

        em {
            font-family: $fontSans;
            font-weight: 450;
        }

        img {
            display: inline;
            margin: 0;
            padding: 0;
            vertical-align: middle;
            text-align: center;
            border: none;
        }
        
        video.darkmode-img,
        img.darkmode-img{
            display: none;
        }
        
    }

    code em {
        font-family: $fontMonoItalic;
    }


    // Main content specific styles
    #main_content_wrap {
        table {
            font-variant-ligatures: none;

            em code {
                padding: .06em 0px .05em;
                font-family: $fontMonoItalicMedium;
                font-style: normal;
                font-variant-ligatures: none;
            }

        }
        
        // Lists
        dl,
        ol,
        ul {
            margin-bottom: 15px;
        }
        
        li {
            line-height: 1.5;
        }
        
        ol {
            list-style-position: inside;
            list-style: decimal;
            padding-left: 20px;
        }
        
        dl {
            dt {
                font-weight: bold;
            }
        
            dd,
            p {
                padding-left: 20px;
                font-style: italic;
            }
        }
        
        hr {
            margin: 20px 0 10px 0;
            border: 0.5px solid rgb(229, 229, 229);
        }
        
        ul {
            list-style-position: outside;
            list-style-type: '\2022 \00a0\00a0';
            padding: 0 0 0 20px;
            
            ul {
                padding-left: 20px;
                margin: 0;
            }
        }

        table.bench {
            a {
                background-color: transparent;

                &:hover {
                    color: $blue;
                }
            }

            th a {
                color: var(--main-text-primary-color, #0D0D0D);

                &:hover {
                    color: var(--main-text-primary-color, #0D0D0D);
                }
            }
        }

        h5 {
            margin-top: 40px;
        }
    }
}

body.documentation,
body.post {

    // Tables
    table {
        margin-bottom: 20px;
        text-align: left;
        width: 100%;
        max-width: 100%;
        display: block;
        overflow-x: auto;
        font-variant-numeric: tabular-nums;
        font-variant-ligatures: none;

        &::-webkit-scrollbar {
            height: 5px;
        }

        &::-webkit-scrollbar-track {
            background: var(--doc-scrollbar-bg, #E6E6E6);
        }

        &::-webkit-scrollbar-thumb {
            background: var(--doc-scrollbar-slider, #CCC);
        }

        &.narrow {
            width: auto;

            td {
                min-width: 40px;
            }
        }

        tr {
            border-bottom: 1px solid var(--doc-codebox-border-color, #E6E6E6);
        }

        tbody tr:last-child {
            border-bottom: 0;
        }

        >tbody>tr:hover {
            background: var(--doc-codebox-border-color, #E6E6E6);
        }

        a {
            text-decoration: underline;
            word-wrap: normal;
            word-break: normal;

            &:hover {
                color: $blue;
                cursor: pointer;
            }

            code {
                word-wrap: normal;
                word-break: normal;
            }
        }

        th {
            padding: 10px;
            font-weight: 700;
            font-size: var(--type-body-small, 14px);
        }

        td {
            padding: 10px;
            border-bottom: 1px solid var(--doc-codebox-border-color, #E6E6E6);
            font-size: var(--type-body-small, 14px);
            line-height: 1.55;
            vertical-align: top;

            &.icon img {
                width: 40px !important;
                height: auto !important;
            }
        }

        tr:last-child td {
            border-bottom: none;
        }

        thead th {
            text-align: left !important;
        }
    }

    // Special table styles
    .media_table+table {
        thead {
            display: none;
        }

        td:nth-child(1) {
            width: 300px;
        }

        td:nth-child(2) {
            width: 250px;
        }

        td:nth-child(3) {
            width: 180px;
        }

        td:nth-child(4) {
            width: 80px;
        }
    }

    .center_aligned_header_table+table thead th {
        text-align: center !important;
    }

    // No-stroke tables
    html.darkmode .nostroke_table+table,
    .nostroke_table+table {
        tr {
            border: 0;

            >td:first-child {
                padding-left: 0;
            }
        }

        th {
            padding: 2px;
            padding-bottom: 4px;

            &:first-child {
                padding-left: 0;
            }
        }

        td {
            padding: 2px 15px 6px 2px;
            border: 0;
        }
    }

    .nostroke_table_groups_of_two+table {
        tr {
            border: 0;

            >td:first-child {
                padding-left: 0;
            }
        }

        th {
            padding: 2px;
            padding-bottom: 4px;

            &:first-child {
                padding-left: 0;
            }
        }

        td {
            padding: 2px 15px 6px 2px;
            border: 0;
        }

        tr:first-child td,
        tr:nth-child(2n+3) td {
            padding-bottom: 16px;
        }
    }

    // Code blocks
    code,
    pre {
        @include code-standard;
        border-radius: 2px;
    }

    pre.highlight {
        -moz-tab-size: 4;
        -o-tab-size: 4;
        tab-size: 4;
        white-space: pre;
        overflow-x: auto;
        padding: 15px;
        margin: 0;

        &::-webkit-scrollbar {
            height: 5px;
        }

        &::-webkit-scrollbar-track {
            background: var(--doc-scrollbar-bg, #E6E6E6);
        }

        &::-webkit-scrollbar-thumb {
            background: var(--doc-scrollbar-slider, #CCC);
        }
    }

    div.highlight {
        width: 100%;
        position: relative;
        border-radius: 10px;
        overflow: hidden;
        transition: border-color .3s;
        background: var(--doc-codebox-background-color, #F2F2F2);
        border: 1px solid var(--doc-codebox-border-color, #D9D9D9);
    }

    .language-text div.highlight {
        border: none;
    }

    .language-console {
        div.highlight {
            border: 1px solid var(--doc-warning-border-color, rgba(255, 204, 204, 0.60));
        }

        pre {
            background: var(--doc-warning-background-color, rgba(255, 229, 229, 0.60));
        }
    }

    .monospace_table+table tbody td {
        font-family: $fontMono;
    }

    code.highlighter-rouge,
    code.language-plaintext {
        border: 1px solid var(--doc-codebox-border-color, #E6E6E6);
        background: var(--doc-codebox-background-color, #F2F2F2);
        font-family: $fontMonoMedium;
        border-radius: 3px;
        padding: 0px 2px;
        margin: 0;

        em {
            font-family: $fontMonoItalicMedium;
        }
    }

    pre {
        padding: 10px;
        overflow: auto;
        background: var(--doc-codebox-background-color, #F2F2F2);
        border-radius: 10px;
    }

    code {
        padding: 1px 0px;
        margin: 0 3px;
        -webkit-font-feature-settings: "ss19";
        font-feature-settings: "ss19";
    }

    pre code {
        display: block;
        box-shadow: none;
    }

    // Table pre elements
    table pre {
        margin: 0;
    }
    
    details{
        summary{
            color: var(--main-text-secondary-color, #666);
            display: inline;
            gap: 5px;
            align-items: center; 
            cursor: pointer;
            transition: padding .3s;
            
            &::after{
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='27' fill='none' viewBox='0 0 26 27'%3E%3Cpath stroke='%23666' stroke-width='1.857' d='m19 10.701-6.5 6.5-6.5-6.5'/%3E%3C/svg%3E");
                background-size: contain;
                background-position: center center;
                background-repeat: no-repeat;
                display: inline-block;
                content: "";
                width: 26px;
                height: 26px;
                transition: transform .3s;
                position: absolute;
                transform: translate(3px,-2px);
            }
            
            &::marker {
                display: none;
            }
            
        }
        &[open]{
            summary{
                padding-bottom: 20px;
                
                &::after{
                    transform: rotate(180deg);
                }
            }
        }
    }

}