@import "bootstrap/custom-bootstrap-variables";
@import 'mixins/type';
@import 'mixins/icon';
@import 'mixins/a11y';

@svg-load square url( 'square.svg' ) {
  fill: #bfc0c1;
}

@svg-load checked url( 'check-square.svg' ) {
  fill: rgb(20, 21, 20);
}

.facets-widget-checkbox {
  @include font-smoothing;
  
  .item-list__checkbox {
    list-style: none;
    padding: 0;
    font-size: 16px;
    
    > .facet-item + .facet-item {
      margin-top: calc(#{$spacer} * 0.5);
    }
  }
}


.facet-item {
  
  > .facets-checkbox {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    z-index: 0;
    
    &:checked + label::before {
      background-position: -1000px -1000px, center;
    }
    
    &:focus + label::before {
      @include focusOutline;
    }
  }
  
  > label {
    margin-bottom: 0;
    display: flex;
    align-items: center;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    position: relative;

    &::before {
      content: '';
      height: 1.2em;
      width: 1.2em;
      min-width: 1.2em;
      display: block;
      border: none;
      margin-right: .5em;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center, -1000px -1000px;
      background-image: svg-inline(square), svg-inline(checked);
    }
  }
  
  .facet-item__count {
    margin-left: .25em;
  }
  
}