@import 'Variables';
@import 'FacetVariables';

@mixin facetValuesCheckboxes($size: 'normal') {
  $pixel-size: '18px';
  @if $size== 'smaller' {
    $pixel-size: '13px';
  }
  input[type='checkbox'] {
    display: none;
  }
  .coveo-facet-value-checkbox {
    width: #{$pixel-size};
    height: #{$pixel-size};
    box-sizing: content-box;
    @include defaultRoundedLowContrastBorder();
    text-align: center;
    vertical-align: middle;
    margin-right: 15px;
    background: white;
    position: relative;
    top: 2px;
    flex-shrink: 0;
    > svg {
      position: relative;
      background: none;
    }
  }
  &.coveo-selected .coveo-facet-value-checkbox {
    svg {
      @include coveo-hook($size);
    }
  }
  &.coveo-with-hover {
    &:hover:not(.coveo-facet-search-button):not(.coveo-excluded):not(.coveo-facet-value-will-exclude):not(.coveo-has-childs-selected)
      .coveo-facet-value-checkbox {
      svg {
        @include coveo-hook($size);
      }
    }
    &:hover.coveo-excluded {
      .coveo-facet-value-checkbox {
        .coveo-hook-svg {
          fill-opacity: 0;
        }
      }
    }
  }

  .coveo-facet-value-checkbox:active {
    outline: none;
  }
  &:not(.coveo-facet-search-button) {
    .coveo-facet-value-checkbox:focus {
      svg {
        @include coveo-hook($size);
        .coveo-exclusion-svg {
          fill-opacity: 0;
        }
      }
    }
  }
  &:not(.coveo-excluded).coveo-facet-value-will-exclude .coveo-facet-value-checkbox,
  &:not(.coveo-excluded):hover.coveo-facet-value-will-exclude .coveo-facet-value-checkbox {
    svg {
      @include coveo-exclusion($size);
    }
  }
  &.coveo-facet-value-will-exclude.coveo-selected .coveo-facet-value-checkbox,
  &:hover.coveo-facet-value-will-exclude.coveo-selected .coveo-facet-value-checkbox {
    .coveo-hook-svg {
      fill-opacity: 0;
    }
  }
  &.coveo-excluded:not(.coveo-facet-value-will-exclude) .coveo-facet-value-checkbox {
    svg {
      @include coveo-exclusion($size);
    }
  }
  &.coveo-facet-value-will-exclude:focus,
  &.coveo-facet-value-will-exclude:hover {
    .coveo-facet-value-checkbox .coveo-hook-svg {
      fill-opacity: 0;
    }
  }
}

@mixin coveo-hook($size: 'normal') {
  @if $size== 'smaller' {
    width: 11px;
    height: 9px;
    bottom: 4px;
    .coveo-hook-svg {
      fill: black;
    }
  } @else {
    width: 14px;
    height: 12px;
    bottom: 2px;
    .coveo-hook-svg {
      fill: $color-grey;
    }
  }
}

@mixin coveo-exclusion($size: 'normal') {
  @if $size== 'smaller' {
    width: 7px;
    height: 7px;
    bottom: 5px;
  } @else {
    width: 10px;
    height: 10px;
    bottom: 3px;
  }
  .coveo-exclusion-svg {
    fill: $color-red;
  }
}

.coveo-facet-values {
  list-style: none;
  padding: 5px 0 0;
  margin: 0;
}

.coveo-facet-value {
  padding: 0 $facet-value-padding;
  margin: 0;
  line-height: 22px;
  position: relative;
  @include facetValuesCheckboxes();
  &.coveo-excluded .coveo-facet-value-caption,
  &.coveo-excluded .coveo-facet-value-computed-field,
  &.coveo-excluded .coveo-facet-value-count {
    text-decoration: line-through;
  }
  > * {
    vertical-align: middle;
  }

  &.coveo-selected {
    font-weight: bold;
  }

  &.coveo-with-hover {
    &:hover,
    &.coveo-focused {
      background-color: $color-blueish-white-grey;
    }
  }

  &.coveo-with-hover:hover .coveo-facet-value-exclude {
    visibility: visible;
  }
}

.coveo-facet-value-label-wrapper {
  display: flex;
}

.coveo-facet-value-label {
  display: block;
  white-space: nowrap;
  cursor: pointer;
  padding: 5px 0;
}

.coveo-facet-value-caption {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: middle;
  flex-grow: 1;
}

.coveo-facet-value-icon {
  display: inline-block;
  margin: 3px 5px 3px 0;
  vertical-align: top;
  float: left;
}

.coveo-facet-value-count {
  vertical-align: middle;
  margin: 0 5px;
  display: inline-block;
  @include transition(opacity 1s);
  &.coveo-waitDelta {
    opacity: 0;
  }
}

.coveo-with-computed-field {
  .coveo-facet-value-count,
  .coveo-facet-value-computed-field {
    font-size: $font-size-smallest;
    position: relative;
    top: 1px;
  }
}

.coveo-facet-value-label.coveo-with-computed-field {
  @include display('flex');
  @include justify-content(space-between);
  .coveo-facet-value-label-wrapper {
    @include order(1);
    @include display(
      'flex'
    ); // This needs to be set, otherwise min-width auto on the elment will make the element overflow it's flex container;
    min-width: 0;
    .coveo-facet-value-checkbox {
      @include order(1);
      @include flex-shrink(0);
    }
    .coveo-facet-value-caption {
      @include order(2);
    }
    .coveo-facet-value-count {
      @include order(3);
    }
  }
  .coveo-facet-value-computed-field {
    @include order(2);
  }
}

.coveo-facet-value-computed-field {
  float: right;
  margin-left: 5px;
}

.coveo-facet-value-exclude {
  cursor: pointer;
  position: absolute;
  top: 9px;
  right: 5px;
  background: white;
  @include defaultRoundedBorder();
  border-color: grey;
  height: 13px;
  width: 13px;
  opacity: 0;
  z-index: 2;
  &:hover,
  &:focus {
    opacity: 1;
  }
  &:active {
    outline: none;
  }
}

$facet-exclude-icon-color: grey;

@mixin facet-exclude-svg {
  width: 7px;
  height: 7px;
  position: absolute;
  top: 2px;
  left: 2px;
}

.coveo-facet-value-exclude-svg {
  @include facet-exclude-svg();
  .coveo-exclusion-svg {
    fill: $facet-exclude-icon-color;
  }
}

.coveo-facet-value-unexclude-svg {
  @include facet-exclude-svg();
  fill: $facet-exclude-icon-color;
}
