@charset "UTF-8";
/* GPLv3 license
FAS - Tree View
Author: ElsaTam (Kapirklaa in Discord)
*/
@keyframes bg-slide {
  from {
    right: 100%;
  }
  to {
    right: 0;
  }
}
body {
  --workleaves-background: var(--background-primary);
  --workleaves-foreground: var(--text-normal);
}

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

.tree-view .el-ul > 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);
}
.tree-view .el-ul > ul 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;
}
.tree-view .el-ul > ul::before,
.tree-view .el-ul > ul ul::before {
  content: "​";
  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;
}
.tree-view .el-ul > ul .list-bullet {
  display: none;
}
.tree-view .el-ul > ul .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;
}
.tree-view .el-ul > ul .list-collapse-indicator.is-collapsed {
  background: var(--color-accent);
}
.tree-view .el-ul > ul .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%);
  }
  .tree-view .el-ul > ul .list-collapse-indicator.is-collapsed:hover {
    background: color-mix(in srgb, var(--color-accent), var(--workleaves-background) 30%);
  }
  .tree-view .el-ul > ul li:hover::after {
    border-color: var(--color-accent);
  }
  .tree-view .el-ul > ul li:hover > ul::before {
    border-color: var(--color-accent);
  }
  .tree-view .el-ul > ul 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);
  }
}
