@import 'Variables';

.coveo-facet-more,
.coveo-facet-less {
  width: 100%;
  height: 15px;
  background: $color-blueish-white;
  cursor: pointer;
  text-align: center;
  &:hover,
  &:focus {
    background: $color-light-grey;
    &,
    &.coveo-accessible-button-pressed {
      outline: 1px solid transparent;
      /* Works on Firefox, doesn't work on IE */
      outline-offset: -3px;
    }
    /* Works on IE and Edge, doesn't work on Firefox & Chrome */
    @media screen and (-ms-high-contrast: white-on-black) {
      &,
      &.coveo-accessible-button-pressed {
        background-color: white;
        .coveo-facet-more-icon-svg,
        .coveo-facet-less-icon-svg {
          color: black;
        }
      }
    }
    @media screen and (-ms-high-contrast: black-on-white) {
      &,
      &.coveo-accessible-button-pressed {
        background-color: black;
        .coveo-facet-more-icon-svg,
        .coveo-facet-less-icon-svg {
          color: white;
        }
      }
    }
  }
}

.coveo-facet-more {
  border-bottom-left-radius: $default-border-radius;
  border-bottom-right-radius: $default-border-radius;
  display: none;
  &.coveo-active {
    display: block;
  }
}

.coveo-facet-more-icon-svg {
  width: 10px;
  height: 6px;
  color: $color-greyish-teal-blue;
}

.coveo-facet-more-icon-svg,
.coveo-facet-less-icon-svg {
  width: 10px;
  height: 6px;
  color: $color-greyish-teal-blue;
}

.coveo-facet-more-icon,
.coveo-facet-less-icon {
  position: relative;
  top: -4px;
}

.coveo-facet-less {
  display: none;
  &.coveo-active {
    display: block;
  }
}

.coveo-facet-footer.coveo-facet-empty {
  visibility: hidden;
}

.coveo-facet-footer {
  background: $color-blueish-white;
  min-height: 15px;
  border-bottom-left-radius: $default-border-radius;
  border-bottom-right-radius: $default-border-radius;
}
