@import "../settings/variables";
@import "../tools/typography";
@import "../tools/ellipsis";
@import "./typography";

.filename-caption {
  @extend .sm-regular--primary;
  width: 100%;
}

.tree {
  $root: &;
  width: 100%;
  height: 100%;
  min-height: 36px;
  outline: none;
  overflow: auto;

  &__icon-container {
    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 16px;
    width: 1em;
    height: 1em;
    min-width: 1em;
    min-height: 1em;

    color: $core-gray-40;

    &--selected {
      color: $core-blue-45;
    }
  }

  &__chevron {
    color: $core-gray-45;
    cursor: pointer;
  }

  &__row-wrapper {
    outline: none;
  }

  &__row-content {
    display: flex;
    align-items: center;
  }

  &__row-container {
    $row-container: &;

    display: flex;
    align-items: center;
    height: 36px;
    background: transparent;
    box-shadow: inset 4px 0px 0px transparent;
    @include typography-sm($core-gray-15);
    cursor: default;
    outline: none;

    &--highlighted,
    &:hover {
      background: $core-gray-98;
    }

    &--selected {
      background: $core-blue-96;
      box-shadow: inset 4px 0px 0px $core-blue-50;

      .filename-caption {
        color: $core-blue-40;
        font-weight: 600;
      }

      &#{$row-container}--highlighted,
      &:hover {
        background-color: $core-blue-94;

        .filename-caption {
          color: $core-blue-45;
        }
      }
    }

    &--selectable {
      cursor: pointer;
    }
  }
}