@import 'Variables';
@import 'bourbon/bourbon';
@import 'FacetVariables';

.coveo-category-facet-search-container {
  padding: 0 $facet-value-padding;
  height: 32px;
  line-height: 30px;
  margin: 5px 0;
  .coveo-facet-search {
    margin: 0;
  }
  .coveo-facet-search-results {
    cursor: auto;
  }
}

.coveo-category-facet-search-container + .coveo-category-facet-values {
  margin-top: 0;
}

.CoveoCategoryFacet:not(.coveo-category-facet-searching)
  .coveo-category-facet-search-container:not(.coveo-category-facet-search-without-button) {
  outline: none;

  &:hover,
  &:focus {
    background-color: $color-blueish-white-grey;
  }
}

.coveo-category-facet-search-icon {
  vertical-align: middle;
  width: 18px;
  height: 18px;
  margin-right: 15px;
  display: inline-block;
  bottom: 1px;
  color: grey;
  @include defaultRoundedLowContrastBorder();
  border-style: dashed;
}

.coveo-category-facet-search-icon-svg {
  color: grey;
  width: 16px;
  height: 11px;
  bottom: 7px;
  position: relative;
  .coveo-more-svg {
    fill: grey;
  }
}

.coveo-category-facet-searching,
.coveo-category-facet-search-without-button {
  .coveo-category-facet-search-placeholder {
    display: none;
  }
  .coveo-facet-search {
    display: block;
  }
}

.coveo-category-facet-search-placeholder {
  cursor: pointer;
}

.coveo-category-facet-search-label {
  vertical-align: middle;
  display: inline-block;
  color: $coveo-blue;
}

.coveo-category-facet-search-value {
  font-size: $font-size-smallest;
  padding: 5px 10px;
  &:hover {
    background-color: $color-blueish-white-grey;
    @include justify-content(space-around);
  }
  cursor: pointer;
}

.coveo-category-facet-search-first-row {
  @include display(flex);
  @include justify-content(space-between);
}

.coveo-category-facet-search-value-caption {
  line-height: 17px;
}

.coveo-category-facet-search-value-number {
  color: $color-blueish-gray;
}

.coveo-category-facet-search-path {
  display: block;
  font-size: 11px;
  @include display(flex);
}

.coveo-category-facet-search-path-parents {
  color: $color-blueish-gray;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 5px;
  direction: rtl;
}

.coveo-category-facet-search-path-last-value {
  white-space: nowrap;
}

.coveo-category-facet-search-second-row {
  height: 13px;
}
