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

.container_tree {
    margin-bottom: 30px;
}

.assets_tree {
    .legends,
    .description_tree {
        @include box-shadow($sh1);
        @include border-radius(8px);
        border: $bd9;
        padding: 15px 20px;
    }

    .description_tree {
        margin-top: 20px;
    }

    .legend_list {
        @include no-spacing;
        list-style: none;
        margin-top: 16px;
    }

    .legend_item {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 32px;
    }

    .legend_item + .legend_item {
        margin-top: 10px;
    }

    .legend_icon {
        display: block;
        flex: 0 0 auto;
        width: 20px;
        height: 20px;
        object-fit: contain;
    }

    .legend_text {
        @include font(szrem(16), $f1);
        color: var(--theme_text);
    }

    .description_tree_list {
        @include no-spacing;
        list-style: none;
        margin-top: 16px;
    }

    .description_tree_item {
        display: grid;
        grid-template-columns: 24px minmax(0, 1fr);
        gap: 12px;
        padding: 16px 0;
        border-top: 1px solid var(--theme_border);
    }

    .description_tree_item:first-child {
        padding-top: 0;
        border-top: 0;
    }

    .description_tree_item:last-child {
        padding-bottom: 0;
    }

    .description_tree_icon {
        display: block;
        width: 24px;
        height: 24px;
        object-fit: contain;
    }

    .description_tree_text {
        @include font(szrem(14), $f1);
        margin: 0;
        color: var(--theme_text_alt);
        line-height: 1.45;
    }

    .description_tree_text b:first-child {
        display: block;
        margin-bottom: 4px;
        color: var(--theme_text);
        font-size: szrem(16);
    }

    .tree_note {
        @include bc(rgba($c16, 0.06), var(--theme_text_alt));
        @include border-radius(8px);
        margin-top: 20px;
        padding: 16px 20px;
        border: 1px solid rgba($c16, 0.18);

        .tree_note_header {
            @include flex;
            @include align-items(center);
            @include gap(10px);

            .icon_info {
                @include normalize-svg((
                    w: list.nth($l10, 1),
                    h: list.nth($l10, 1)
                ));
            }

            .tree_note_title {
                @include font(szrem(16), $f2, bold);
                color: var(--theme_text);
                margin: 0;
            }
        }

        .tree_note_text {
            @include font(szrem(14), $f1);
            margin: 10px 0 0;
            color: var(--theme_text_alt);
            line-height: 1.45;
        }
    }
}

.project_structure,
.installation {
    .tree_viewer {
        @include bc(var(--theme_surface), var(--theme_text));
        @include border-radius(8px);
        @include box-shadow($sh1);
        box-sizing: border-box;
        overflow: hidden;
        border: 1px solid var(--theme_border);
    }

    .tree_viewer__frame { display: block; }

    .tree_viewer__header {
        @include bc(var(--theme_surface_alt), var(--theme_text));
        padding: 14px 18px;
        border-bottom: 1px solid var(--theme_border);
    }

    .tree_viewer__title {
        @include font(szrem(20), $f2, bold);
        @include text;
        margin: 0;
        color: var(--theme_accent);
    }

    .tree_viewer__content { display: block; }

    .tree_viewer__viewport {
        @include scroll((
            color: $c4,
            bg: var(--theme_scroll_track),
            width: 10px,
            thumb_border: 3px solid var(--theme_scroll_track),
            radius: 5px
        ));
        box-sizing: border-box;
        overflow: auto;
        padding: 20px;

        @include brp($b6) {
            max-height: 420px;
            padding: 15px;
        }
    }

    .tree_viewer__tree,
    .tree_viewer__children {
        @include no-spacing;
        list-style: none;
    }

    .tree_viewer__node {
        @include font(szrem(16), $f1);
        color: var(--theme_text);
        white-space: nowrap;

        @include brp($b6) {
            font-size: szrem(14);
        }
    }

    .tree_viewer__row {
        display: flex;
        align-items: center;
        min-height: 28px;
    }

    .tree_viewer__branch {
        @include font(100%, monospace);
        color: var(--theme_accent_alt);
        flex: 0 0 auto;
        white-space: pre;
    }

    .tree_viewer__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 20px;
        height: 20px;
        margin: 0 8px 0 6px;
    }

    .tree_viewer__icon img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .tree_viewer__text { display: inline-block; }
    .tree_viewer__node--folder > .tree_viewer__row { font-weight: bold; }
    .tree_viewer__children { display: block; }

    .tree_viewer__empty,
    .tree_viewer__invalid {
        @include t1(( c: var(--theme_text_alt) ));
        margin: 0;
    }

    .tree_viewer.without-data,
    .tree_viewer.invalid-data {
        .tree_viewer__viewport { padding: 20px; }
    }
}