$bz-explorer-width: 220px;

.bz-column-explorer {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  height: 100%;
}

.bz-column-explorer__column {
  border-right: 1px solid $bz-neutral-300;
  height: 100%;
  list-style-type: none;
  overflow-y: auto;
  padding: 0;
  width: $bz-explorer-width;
}

.bz-column-explorer__item {
  align-items: center;
  cursor: pointer;
  display: flex;
  padding: $bz-space-inset-squish-default;
  &--active {
    background-color: $bz-neutral-200;
  }
  &--leaf {
    align-items: center;
    cursor: pointer;
    display: flex;
    font-size: $bz-font-size-body-small;
    line-height: 21px;
    padding: $bz-space-inset-squish-default;
  }
  &--title {
    padding-left: $bz-space-inset-xs;
  }
  &:hover:not(.bz-column-explorer__item--active) {
    background-color: $bz-neutral-200;
  }
  &:focus {
    outline: none;
  }
}

.bz-column-explorer__name {
  width: calc(100% - 16px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  &--title {
    font-weight: 600;
  }
}

[dir="rtl"] {
  .bz-column-explorer__item {
    &--title {
      padding-right: $bz-space-inset-xs;
      padding-left: $bz-space-inset-m;
    }
  }
}

@media screen and (min-width: 481px) {
  .bz-column-explorer__item--title {
    display: none;
  }
}