@use "../animations/animations";
@forward "../shared/workleaves";

body {
    --tree-view-guide-color: var(--background-secondary);
}

.tree-view .el-ul > ul,
.tree-view > * > ul {
    --indentation-guide-reading-indent: -0.8em;
    --indentation-guide-width: 2px;
    --indentation-guide-color: var(--tree-view-guide-color);
    --list-bullet-size: 0.8em;

    position: relative;
    padding-inline-start: calc(var(--list-indent) - 3ch);

    li::after {
        content: "";
        display: block;
        position: absolute;
        top: calc(-0.5em * var(--line-height-normal) - var(--indentation-guide-width) * 0.5);
        left: calc(-1 * var(--list-indent) + var(--indentation-guide-reading-indent));
        width: calc(var(--list-indent) + 2px);
        height: calc(1em * var(--line-height-normal));
        border: solid var(--indentation-guide-color);
        border-width: 0 0 var(--indentation-guide-width) var(--indentation-guide-width);
        border-bottom-left-radius: var(--radius-m);
        pointer-events: none;
    }

    &::before,
    ul::before {
        content: "\200B";
        position: absolute;
        display: block;
        inset-inline-start: var(--indentation-guide-reading-indent);
        border-inline-end: var(--indentation-guide-width) solid var(--indentation-guide-color);
        bottom: calc(0.5em * var(--line-height-normal) + 2px + var(--radius-m));
        top: calc(-0.5em * var(--line-height-normal) - var(--indentation-guide-width) * 0.5);
        z-index: 1;
    }

    .list-bullet {
        display: none;
    }

    .list-collapse-indicator {
        position: absolute;
        opacity: 1;
        top: calc(0.5em * var(--line-height-normal) - var(--list-bullet-size) * 0.5 + var(--list-spacing));
        left: calc(
            var(--indentation-guide-reading-indent) - var(--list-bullet-size) * 0.5 + var(--indentation-guide-width) *
                0.5
        );
        margin: 0;
        padding: 0;
        display: block;
        width: var(--list-bullet-size);
        height: var(--list-bullet-size);
        border-radius: 50%;
        background: var(--workleaves-background);
        border: 1px solid var(--color-accent);
        z-index: 2;
    }
    .list-collapse-indicator.is-collapsed {
        background: var(--color-accent);
    }
    .list-collapse-indicator svg {
        display: none;
    }
}

@media (hover: hover) {
    .tree-view .el-ul > ul {
        .list-collapse-indicator:hover {
            background: color-mix(in srgb, var(--color-accent), var(--workleaves-background) 70%);
        }
        .list-collapse-indicator.is-collapsed:hover {
            background: color-mix(in srgb, var(--color-accent), var(--workleaves-background) 30%);
        }

        li:hover {
            &::after {
                border-color: var(--color-accent);
            }
            > ul::before {
                border-color: var(--color-accent);
            }
        }

        li:has(> .list-bullet:last-child):hover::before {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            background: linear-gradient(to right, var(--color-accent), transparent 100%);
            opacity: 0.2;
            animation: bg-slide 0.5s ease-in-out;
        }
    }
}

@media print {
    .tree-view ul {
        list-style-type: none;
    }

    .tree-view ul ul {
        position: relative;
    }

    .tree-view ul li::after {
        width: var(--list-indent);
    }
}
