.app-tree
{
  width: 340px;
  background: var(--color-tree);
  padding: 0;
  position: relative;
  overflow-y: auto;
  height: 100vh;
  box-shadow: var(--shadow-short);

  .theme-rounded &
  {
    height: calc(100vh - 20px);
    margin: 10px 0 10px 10px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-short);
  }

  .ui-header-bar + .ui-tree
  {
    margin-top: -10px;
  }

  .ui-dot-button
  {
    margin-right: -8px;
  }

  .ui-tree-item.is-active:before
  {
    background: var(--color-tree-selected);
  }
}

.app-tree-resizable
{
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--color-text);
  opacity: 0;
  right: 0;
  width: 6px;
  cursor: ew-resize;
  transition: opacity 0.15s ease 0s;

  &:hover
  {
    transition-delay: 0.2s;
    opacity: 0.04;
  }
}