.Tree {
  white-space: nowrap;
}

.Tree-title {
  display: flex;
  justify-content: space-between;
  padding: 0 1rem;
  margin-bottom: 0.5rem;
  color: $color-sidebar-heading;

  h3 {
    @include font(label);
  }

  button {
    cursor: pointer;
    svg {
      fill: $color-heading;
      opacity: 0.75;
    }
    &:hover svg {
      fill: darken($color-heading, 50%);
    }
  }

  ul {
    line-height: 0;
    li {
      display: inline-block;
    }
  }
}

.Tree-collection {
  &.is-closed {
    background-color: transparent;

    .Tree-collectionItems {
      display: none;
    }

    .Tree-collectionLabel {
      span::before {
        [dir='ltr'] & {
          background-image: url('../img/icon-navigation-closed-ltr.svg');
        }
        [dir='rtl'] & {
          background-image: url('../img/icon-navigation-closed-rtl.svg');
        }
      }
    }
  }
}

.Tree-collectionLabel {
  @include font(caption);
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  color: $color-text;

  &:hover {
    background-color: $color-ui-hover;
  }

  span {
    @include padding-inline(start, 0.75rem);
    @include margin-inline(start, -1.75rem);
    display: block;
    position: relative;
  }

  span::before {
    @include offset-inline(start);
    display: inline-block;
    position: absolute;
    top: 0.25rem;
    width: 0.75rem;
    height: 0.75rem;
    background-image: url('../img/icon-navigation-opened.svg');
    background-size: 0.5rem;
    background-repeat: no-repeat;
    background-position: 50%;
    opacity: 0.5;
    content: '';
  }
}

.Tree-item {
  @include font(caption);
}

.Tree-entityLink {
  display: flex;
  align-items: center;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  text-decoration: none;

  &:hover {
    background-color: $color-ui-hover;
  }

  .is-current & {
    background-color: $color-ui-active;
  }

  .Status {
    @include margin-inline(start, 0.25rem);
  }
}

@for $i from 1 through 8 {
  .Tree-depth-#{$i} {
    $padLeft: ($i * 1rem);

    .Tree-collectionLabel,
    .Tree-entityLink {
      @include padding-inline(start, $padLeft);
    }
  }
}