@use "sass:color";
@use "../core/_instances" as *;

html.page[data-theme="dark"] {
    .documentationpage {
        pre {
            &[class*="language-"] {
                > code {
                    filter: invert(1) hue-rotate(209deg);
                }
            }
        }
    }
}

.documentationpage {
    @include scroll((
        color: $c4,
        bg: var(--theme_scroll_track),
        width: 16px,
        thumb_border: 3px solid var(--theme_scroll_track),
        radius: 7px
    ));
    @include font(100%, $f1);
    @include no-spacing;
    @include no-border;
    @include bc(var(--theme_bg), var(--theme_text));
    min-height: 100vh;
    height: 100vh;

    article {
        border-bottom: 2px dashed var(--theme_border);
        padding-bottom: 40px;
        margin-bottom: 30px;
    }

    .search_target {
        box-sizing: border-box;
        transition: outline-color 0.2s ease-in-out;
        outline: 3px solid var(--theme_accent);
        outline-offset: 10px;
    }

    .main_content {
        padding: 30px min(5vw, 192px) 50px;

        @include brp($b6) {
            padding: 25px min(5vw, 192px) 50px;
        }
    }

    .group_title { margin-bottom: 30px; }

    .title {
        @include bc($c0, var(--theme_text));
        @include t1((
            f: $f4,
            s: szrem(28),
            w: bold,
            a: left
        ));
        margin-block: 30px 20px;

        @include brp($b6) {
            font-size: szrem(32);
            margin-bottom: 15px;
        }
    }

    .subtitle {
        @include font(szrem(24), $f3, 900);
        @include text;
        margin-bottom: 5px;
        color: var(--theme_accent);

        @include brp($b6) {
            font-size: szrem(24);
        }
    }
    .subtitle_2 {
        @include t1((
            f: $f2,
            s: szrem(20),
            w: bold
        ));
        color: var(--theme_text);
    }

    .category {
        @include tf((
            size: szrem(38),
            family: $f2,
            weight: bold,
            transform: uppercase
        ));
        margin: 35px 0 20px;
        padding-left: 12px;
        border-left: 6px solid var(--theme_accent_alt);
        color: var(--theme_text);
        letter-spacing: 0.02em;

    }

    .container_attributes {
        @include flex;
        @include gap(10px);
        margin-block-start: 15px;

        .attribute {
            @include t1((
                f: $f2,
                s: szrem(14)
            ));
            @include bc(
                $c21,
                var(--theme_text_alt)
            );
            @include border-radius(25px);
            @include flex;
            padding: 5px 15px;
            margin-bottom: 3px;
            color: var(--theme_text);
        }
    }

    .attribute {
        @include t1((
            f: $f2,
            s: szrem(20),
            w: bold
        ));
        @include border-radius(7px);
        @include flex;
        margin-bottom: 3px;
        color: var(--theme_text);
    }

    .deprecated { color: var(--theme_accent); }

    .description, p {
        @include t1;
        margin-bottom: 15px;
    }

    .mb { margin-bottom: 25px !important; }

    .note {
        @include t1(( c: var(--theme_text_alt) ));
        padding: min(5vw, 15px);
        border: 1px solid var(--theme_border);
        border-left: 6px solid var(--theme_accent_alt);
        margin-bottom: 15px;
        margin-inline-end: 15px;
    }

    .use {
        .title {
            @include font(szrem(28), $f2, bold);
            @include text;
            color: var(--theme_text);
            margin: {
                top: 45px;
                bottom: 10px;
            }
        }

        .subtitle {
            @include font(szrem(20), $f2, bold);
            @include text;
            color: var(--theme_text_alt);
            margin: {
                top: 20px;
                bottom: 10px;
            }
        }
    }

    .result {
        box-sizing: border-box;
        background-color: var(--theme_surface_alt);
        border: 2px dashed var(--theme_border);
        padding: 10px;
        display: block;
        margin: 10px 0;

        .box {
            @include whs(100px);
            @include bc(var(--theme_accent), var(--theme_surface));

            @include brp($b9) {
                @include whs(50px);
            }
        }

        .box_no_bgc {
            @include whs(100px);

            @include brp($b9) {
                @include whs(50px);
            }
        }

    }

    .container_example {
        @include bc(var(--theme_surface), var(--theme_text));
        @include border-radius(7px 7px 0 0);
        @include box-shadow($sh1);
        border-block-start: 10px solid var(--theme_accent_alt);
        box-sizing: border-box;
        padding: 0px min(0.78vw, 15px) 15px;
    }

    .tab_panel {
        border: $bd3;
        border-block-start: $bd4;

        .tab_panel_list {
            @include scroll((
                color: $c4,
                bg: var(--theme_scroll_track),
                width: 8px,
                thumb_border: 3px solid var(--theme_scroll_track),
                radius: 7px
            ));
            display: flex;
            gap: 4px;
            padding-block: 10px;
            overflow-x: auto;
        }

        .tab_panel_tab {
            @include font(szrem(16), $f2, bold);
            @include border-radius(5px);
            @include bc(var(--theme_surface_alt), var(--theme_text));
            padding: 10px 15px;
            border: 1px solid var(--theme_border);
            cursor: pointer;
            white-space: nowrap;

            &.is_active {
                @include bc(var(--theme_accent), var(--theme_surface));
                border-color: var(--theme_accent);
            }
        }

        .tab_panel_panel {
            padding-block-start: 5px;

            > pre,
            > .result {
                margin-block-end: 0;
            }
        }
    }

    code {
        @include font(szrem(16), $f1);
        padding: 10px 15px;
        display: block;
        white-space: pre-wrap !important;
        word-break: break-word !important;
    }

    pre {
        @include border-radius(5%);
        margin-bottom: 25px;

        &:before { display: none; }
        &:after { display: none; }

    }

    .container_table {
        @include wh(100%);
        scrollbar-gutter: stable;
        overflow-x: auto;
    }

    table {
        margin-block-end: 20px;

        &.full { width: 100%; }

        thead {
            th {
                @include border-radius(5%);
                @include bc(var(--theme_bg_th), var(--theme_text_th));
                padding: 10px 15px;
                border-right: 1px solid var(--theme_border);

                &:first-child { border-radius: 6px 0 0 0; }
                &:last-child {
                    border-radius: 0 6px 0 0;
                    border-right: none;
                }
            }
        }

        tbody {
            td {
                @include t1(( a: left ));
                padding: 10px 15px;
                border: 1px solid var(--theme_border);

                b { font-weight: bold; }

                ul {
                    margin-inline-start: 40px;
                    li { list-style-type: disc; }
                }
            }
        }
    }
}

@print {
    size: A3;
    margin: 20mm;
}