@import '../Variables';
@import '../mixins/dynamicFacet';

$level-space: 20px;

.coveo-dynamic-hierarchical-facet-values {
  @include facetValues;

  &.coveo-with-space {
    .coveo-dynamic-hierarchical-facet-all,
    .coveo-dynamic-hierarchical-facet-value,
    .coveo-dynamic-hierarchical-facet-show-less,
    .coveo-dynamic-hierarchical-facet-show-more {
      padding-left: $level-space;

      &.coveo-with-space {
        padding-left: $level-space * 2;
      }
    }
  }
}

.coveo-dynamic-hierarchical-facet-collapsed {
  .coveo-dynamic-hierarchical-facet-all,
  .coveo-dynamic-hierarchical-facet-value,
  .coveo-dynamic-hierarchical-facet-show-less,
  .coveo-dynamic-hierarchical-facet-show-more {
    &:not(.coveo-show-when-collapsed) {
      display: none;
    }
  }
}

button.coveo-dynamic-hierarchical-facet-value,
button.coveo-dynamic-hierarchical-facet-all {
  display: inline-flex;
  position: relative;
}

.coveo-dynamic-hierarchical-facet-value,
.coveo-dynamic-hierarchical-facet-all {
  text-align: left;
  cursor: pointer;
  font-size: $font-size-regular;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  align-items: center;
  line-height: 27px;
  width: 100%;

  &:hover,
  &.coveo-focused {
    opacity: $active-text-opacity;
  }
}

.coveo-dynamic-hierarchical-facet-value {
  &.coveo-with-space {
    padding-left: $level-space;
  }

  &:disabled {
    cursor: auto;
    &:hover {
      opacity: 1;
    }
  }

  &.coveo-selected {
    .coveo-dynamic-hierarchical-facet-value-label,
    .coveo-dynamic-hierarchical-facet-value-count {
      font-weight: bold;
    }
  }
}

.coveo-dynamic-hierarchical-facet-value-label {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: black;
}

.coveo-dynamic-hierarchical-facet-value-count {
  margin-left: 8px;
  color: $color-blueish-gray;
}

$arrow-svg-dimensions: 11px;
.coveo-dynamic-hierarchical-facet-value-arrow-right,
.coveo-dynamic-hierarchical-facet-value-arrow-left {
  svg {
    width: $arrow-svg-dimensions;
    height: $arrow-svg-dimensions;
    color: $coveo-blue;
    display: inline-block;
  }
}

.coveo-dynamic-hierarchical-facet-value-arrow-right {
  margin-left: 8px;
  svg {
    transform: rotate(270deg);
    vertical-align: middle;
  }
}

.coveo-dynamic-hierarchical-facet-value-arrow-left {
  position: absolute;
  left: 2px;
  top: 0;
  svg {
    transform: rotate(90deg);
  }
}

.coveo-dynamic-hierarchical-facet-show-more {
  @include facetShowMore();
}

.coveo-dynamic-hierarchical-facet-show-less {
  @include facetShowLess();
}
