$chevron-width: $chevron-width + 0.0625rem;

.treeview-container {
  position: relative;
  overflow: auto;
  border: 1px solid $gray-var-9;
  min-height: 18.75rem;
  height: 18.75rem;
  padding: $treeview-container-padding;
  background-color: $white;

  > .treeview:first-of-type {
    overflow: hidden;
  }

  .treeview {
    position: relative;
    z-index: 1;
  }
}

.treeview {
  position: relative;
  list-style-type: none;
  padding-left: 0;
  display: block;
  flex-direction: column;
  width: 100%;
}

.treeview-node {
  display: block;
  width: 100%;
  position: relative;

  .treeview-link {
    display: flex;
    align-items: center;
    color: $body-color;
    position: relative;
    text-decoration: none !important;
    line-height: 1;
    padding: $treeview-toggle-padding;
    cursor: pointer;

    &::after {
      display: none;
      top: 0;
      right: -50%;
      bottom: 0;
      left: -50%;
      position: absolute;
      z-index: -1;
      content: '';
    }
    &:hover::after {
      display: block;
      background-color: $treeview-node-hover-bg;
    }
  }
}

.treeview-toggle {
  padding-left: $treeview-offset-left;

  &::before {
    left: -0.125rem;
    display: block;
    position: relative;
    width: $chevron-width;
    height: $chevron-width;
    border-style: solid;
    border-color: $treeview-chevron-color;
    border-width: $treeview-chevron-width $treeview-chevron-width 0 0;
    content: '';
    transform: rotate(45deg);
  }

  &[aria-expanded="true"] {
    &::before {
      top: -0.0625rem;
      transform: rotate(135deg);
      left: 0;
      border-color: $treeview-chevron-color-active;
    }
  }

  &:active {
    &::before {
      border-color: $treeview-chevron-color-focus;
    }
  }
}

.treeview-label {
  margin-left: $treeview-label-offset;
}

.treeview-icon {
  width: $treeview-icon-width;
  height: $treeview-icon-height;
  margin-left: $treeview-icon-spacer;
  margin-right: $treeview-icon-spacer;
  display: inline-block;

  &:before {
    content: $treeview-folder-icon;
  }

  & + .treeview-label {
    margin-left: 0 !important;
  }
}

.treeview > .treeview-node .treeview {
  width: calc(100% - #{$treeview-subtreeview-offset});
  margin-left: $treeview-subtreeview-offset;
}