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

$header-height: 35px;

.coveo-dynamic-facet-header {
  border-bottom: $default-border;
  height: $header-height;
  @include display(flex);
}

.coveo-dynamic-facet-header-title {
  margin: 0;
  font-size: $font-size-regular;
  color: $coveo-blue;
  font-weight: bold;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  text-transform: capitalize;
  line-height: $header-height;

  @include flex-grow(1);

  &.coveo-clickable {
    cursor: pointer;
  }
}

$header-element-padding: 5px;
$header-svg-dimensions: 15px;

@mixin coveo-dynamic-facet-header-svg {
  width: $header-svg-dimensions;
  height: $header-svg-dimensions;
  color: $coveo-blue;
  display: inline-block;
  vertical-align: middle;
}

.coveo-dynamic-facet-header-wait-animation {
  padding: 0 $header-element-padding;
}

.coveo-dynamic-facet-header-wait-animation-svg {
  @include coveo-dynamic-facet-header-svg;
  @include facet-header-animation;
}

.coveo-dynamic-facet-header-collapse,
.coveo-dynamic-facet-header-expand {
  height: 100%;
}

.coveo-dynamic-facet-collapse-toggle-svg {
  @include coveo-dynamic-facet-header-svg;
}

.coveo-dynamic-facet-header-btn {
  @include linkButton();

  padding: 0 $header-element-padding;
  font-size: $font-size-smaller;
}
