.Tree {
  white-space: nowrap;
}

.Tree-title {
  @include font(label);
  @include padding-inline(start, 1rem);

  color: $color-sidebar-heading;
  font-family: $ecl-font-family-base;
  font-size: map-get($ecl-font-size, 's');
  margin-bottom: 0.5rem;
}

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

    .Tree-collectionItems {
      display: none;
    }

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

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

.Tree-collectionItems {
  background-color: map-get($ecl-colors, 'grey-5');
  border-top: 1px solid map-get($ecl-colors, 'grey-15');

  .Tree-collectionItems {
    background-color: map-get($ecl-colors, 'grey-10');

    .Tree-collectionItems {
      background-color: map-get($ecl-colors, 'grey-15');
    }
  }
}

.Tree-collectionLabel {
  @include font(caption);

  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  color: $color-text;
  font: inherit;
  padding: 0 map-get($ecl-spacing, 'xxs') 0 map-get($ecl-spacing, 's');
  display: flex;
  align-items: center;

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

  span {
    @include padding-inline(start, 0);
    @include margin-inline(start, 0);

    display: block;
    position: relative;
  }

  span::after {
    @include offset-inline(end, 1rem);

    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 0.75rem;
    height: 0.75rem;
    background-image: url('../img/icon-navigation-opened.svg');
    background-size: 0.8rem;
    background-repeat: no-repeat;
    background-position: 50%;
    opacity: 0.6;
    content: '';
  }

  > span {
    flex-grow: 1;
  }

  .Status {
    @include margin-inline(end, map-get($ecl-spacing, 'xxs'));

    span {
      @include padding-inline(start, 0);
      @include margin-inline(start, 0);

      display: block;
      position: relative;
    }

    span::after {
      display: none;
    }
  }
}

.Tree-items {
  border-top: 1px solid map-get($ecl-colors, 'grey-15');
  border-bottom: 1px solid map-get($ecl-colors, 'grey-15');
}

.Tree-items > li + li {
  border-top: 1px solid map-get($ecl-colors, 'grey-15');
}

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

.Tree-entityLink {
  color: map-get($ecl-colors, 'grey-100');
  display: flex;
  align-items: center;
  text-decoration: none;
  padding-bottom: 0;
  padding-top: 0;
  padding-right: map-get($ecl-spacing, 'xxs');

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

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

  .Status {
    @include margin-inline(end, map-get($ecl-spacing, 'xxs'));
  }
}

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

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

.Tree-depth-1 li {
  line-height: 2.5;
  font-size: map-get($ecl-font-size, 's');
}

.Tree-search {
  padding: 0 map-get($ecl-font-size, 's');
}