
// 1. outline width: 230px
// 2. editor max width: 1000px
// 3. only render outline when the container reach min width: 1000 + 230 * 2 = 1460px
@container editor-pane-view-container (min-width: 1460px) {
    .outline {
        display: block !important;
    }
}

.outline {
    position: absolute;
    display: none;

    width: 230px;
    height: 100%;
    
    right: 0; /* Position on the right side of the screen */
    top: 45px;
    
    color: var(--nota-outline-primary-text);
    transition: right 0.3s ease-in-out;

    &.hidden {
        right: -230px;  // Hide by sliding out
    }

    &.visible {
        right: 0;  // Show by sliding in
    }

    & > .file-name-heading {
        font-size: 12.5px;
        padding: 18px 16px;
        color: var(--nota-outline-primary-text);
        
        span {
            font-family: harmonyOS sans-bold;
        }
    }

    // tree style
    .list-view .list-view-container {

        & > .list-view-row {

            // selection
            &.selected {
                color: var(--nota-outline-select-text);
                background-color: transparent;
            }
        
            // hovered (make sure does not affect 'selected')
            &.hovered:not(.selected) {
                color: var(--nota-outline-select-text);
                background-color: transparent;

                ::before {
                    opacity: 0.8;
                }
            }

            &.focused:not(.selected) {
                background-color: transparent;
            }
        }

        .tree-list-indent {
            width: 0 !important;
            margin-right: 2px;           // use these two lines to adjust
            transform: translateX(-2px); // position of the arrow icons
    
            &::before {
                opacity: 0;
                font-size: 11.5px;
                border-radius: 20px;
                margin-right: 2px;
    
                // animations
                transition: transform 0.3s ease, opacity 0.3s ease-in-out;
            }
    
            &.collapsed::before {
                opacity: 0.85;
                transform: rotate(0deg);
            }

            // add "..." after a collapsed item
            &.collapsed + .tree-list-content::after {
                content: "...";
                position: absolute;
                margin-left: 4px;
                top: 40%;
                transform: translateY(-50%);
            }
    
            &:not(.collapsed)::before {
                opacity: 0;
                transform: rotate(90deg);
            }
        }

        .tree-list-content {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        
            .outline-item[level='1'] {
                font-family: harmonyOS sans-bold;
            }
        }
    }

    .hover-box {
        position: absolute;
        right: 0;
        font-size: 11px;
        background-color: var(--nota-outline-overflow-hover-box-background);
        border: 2px;
        padding: 4px;
    }
}