rollup.build.css

.tree-menu {
  --font-family: "Avenir Next", Helvetica, Arial, sans-serif;
  --item-padding: 5px;
  --item-height: 32px;
}
@media (prefers-color-scheme: light) {
  .tree-menu {
    --tree-background: #ffffff;
    --item-title: rgba(31, 31, 31, 0.787);
    --item-info: #79aaff;
    --item-group-icon: #babec2;
    --item-selected-background: rgba(129, 129, 129, 0.364);
    --item-selected-color: #202020;
    --item-hover-background: rgba(0, 0, 0, 0.063);
    --item-hover-color: #000000;
    --item-disabled-color: rgba(129, 129, 129, 0.533);
    --item-sizer-color: #868686;
  }
}
@media (prefers-color-scheme: dark) {
  .tree-menu {
    --tree-background: #242539;
    --item-title: rgba(225, 225, 225, 0.787);
    --item-info: #c8a636;
    --item-group-icon: #ff8c00;
    --item-selected-background: rgba(148, 185, 247, 0.364);
    --item-selected-color: #ffffff;
    --item-hover-background: rgba(190, 198, 255, 0.08);
    --item-hover-color: #04c5ff;
    --item-disabled-color: rgba(129, 129, 129, 0.533);
    --item-sizer-color: #3c92fc;
  }
}
.dark.tree-menu,
.dark .tree-menu {
  --tree-background: #242539;
  --item-title: rgba(225, 225, 225, 0.787);
  --item-info: #c8a636;
  --item-group-icon: #ff8c00;
  --item-selected-background: rgba(148, 185, 247, 0.364);
  --item-selected-color: #ffffff;
  --item-hover-background: rgba(190, 198, 255, 0.08);
  --item-hover-color: #04c5ff;
  --item-disabled-color: rgba(129, 129, 129, 0.533);
  --item-sizer-color: #3c92fc;
}
.light.tree-menu,
.light .tree-menu {
  --tree-background: #ffffff;
  --item-title: rgba(31, 31, 31, 0.787);
  --item-info: #79aaff;
  --item-group-icon: #babec2;
  --item-selected-background: rgba(129, 129, 129, 0.364);
  --item-selected-color: #202020;
  --item-hover-background: rgba(0, 0, 0, 0.063);
  --item-hover-color: #000000;
  --item-disabled-color: rgba(129, 129, 129, 0.533);
  --item-sizer-color: #868686;
}
.heading {
  font-family: "Avenir Next", Helvetica, Arial, sans-serif;
  font-size: 40px;
  font-weight: bold;
}
.tree-menu {
  --resizeX: 65%;
  overflow-x: hidden;
  background-color: var(--tree-background);
  font-family: var(--font-family);
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Old versions of Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently */
  /*
  .wrapper {
  }
  */
}
.tree-menu .value {
  position: relative;
  background-color: var(--tree-background);
  position: absolute;
  display: flex;
  flex-grow: 1;
  align-self: center;
  left: var(--resizeX);
  height: var(--item-height);
  width: calc(99% - var(--resizeX));
  z-index: 2;
}
.tree-menu .value > .sizer {
  --padding: calc(var(--item-padding) * -1);
  position: absolute;
  top: var(--padding);
  bottom: calc(var(--padding) + 1px);
  min-height: 100%;
  min-width: 10px;
  cursor: e-resize;
  z-index: 3;
  border-left: 1px dotted var(--item-sizer-color);
  opacity: 0.4;
  margin-left: -2px;
}
.tree-menu .value > .sizer:hover {
  border-left: 1px dotted var(--item-sizer-color);
  opacity: 1;
}
.tree-menu .value .control {
  display: flex;
  justify-content: center;
  padding-left: 0px;
  align-items: center;
  flex-grow: 1;
  overflow-x: hidden;
  overflow-y: hidden;
}
.tree-menu .group {
  position: relative;
  transition: all 0.3s cubic-bezier(0.81, 0.58, 0.48, 1.41);
}
.tree-menu .folder {
  transition: all 0.2s linear;
  margin-right: 5px;
}
.tree-menu .item {
  display: flex;
  flex-direction: row;
  cursor: pointer;
  transition: all 0.3s ease-in;
  color: var(--item-title);
}
.tree-menu .item.disabled {
  pointer-events: none;
  color: var(--item-disabled-color);
}
.tree-menu .item:hover {
  color: var(--item-hover-color);
  background-color: var(--item-hover-background);
  transition: all 0.3s ease-in;
  opacity: 1;
}
.tree-menu .item.hasChilds {
  font-weight: 800;
}
.tree-menu .item.hasChilds .folder {
  display: flex;
  margin-left: 5px;
  justify-content: center;
  align-items: center;
}
.tree-menu .item ~ .group {
  max-height: var(--mh);
  overflow: hidden;
}
.tree-menu .item ~ .group.disabled {
  pointer-events: none;
  color: var(--item-disabled-color);
}
.tree-menu .item.collapsed ~ .group {
  max-height: 0px;
  overflow: hidden;
}
.tree-menu .item.expanded {
  /*
          ~ .group {

          }
          */
}
.tree-menu .item.expanded .folder.enable-rotate {
  transform: rotate(90deg);
}
.tree-menu .item > .content {
  padding: var(--item-padding);
  min-height: var(--item-height);
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow: hidden;
  flex-grow: 1;
}
.tree-menu .item > .content > .text .title,
.tree-menu .item > .content .text .info {
  overflow: hidden;
  transition: all 0.4s ease-in-out;
}
.tree-menu .item > .content:hover:has(.info) {
  color: var(--item-hover-color);
}
.tree-menu .item > .content:hover:has(.info) > .text .title.vertical {
  top: 0%;
  transform: translateY(-100%);
  opacity: 0.1;
}
.tree-menu .item > .content:hover:has(.info) > .text .title.horizontal {
  top: 0%;
  transform: translateY(-100%);
}
.tree-menu .item > .content:hover:has(.info) > .text .info.vertical {
  top: 50%;
  transform: translateY(0%);
}
.tree-menu .item > .content:hover:has(.info) > .text .info.horizontal {
  position: absolute;
  transform: translateX(0%);
}
.tree-menu .item > .content > .text {
  position: relative;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-content: center;
  overflow-x: clip;
  max-height: var(--item-height);
}
.tree-menu .item > .content > .text > .title:has(~.info.vertical,~.info.horizontal) {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-grow: 1;
  align-content: center;
}
.tree-menu .item > .content > .text > .info {
  position: relative;
  font-size: 0.7em;
  color: var(--item-info);
  overflow: hidden;
  display: flex;
}
.tree-menu .item > .content > .text > .info.vertical {
  transform: translateY(300%);
}
.tree-menu .item > .content > .text > .info.horizontal {
  transform: translateX(-300%);
}
.tree-menu .item > .content > .icon {
  display: flex;
  padding-right: 5px;
}
.tree-menu .selected {
  background-color: var(--item-selected-background);
  color: var(--item-selected-color) !important;
  z-index: 9999;
}
/*
.test {
  &.tree-menu {
    .item:hover {
      background-color: red;
    }
  }
}
*/