%active-filter {
  position: relative;

  &:before {
    content: "\2022";
    font-size: 28px;
    left: 9px;
    position: absolute;
    top: 7px;
    font-family: $helvetica;
    color: $nav-hover;
  }
}

ol.results-facets {
  background: $header-background-2;
  @include clearfix;
  margin: 0;
  padding: 0;
  position: relative;

  > li {
    float: left;
    list-style: none;
    border-right: 1px solid hsla(0, 0%, 0%, 0.1);

    &:first-child {
      margin: 0 0 0 15px;
    }

    &:last-child {
      border-right: 0;
    }
  }

  .facet-loader {
    padding: 5px;
    vertical-align: middle;
  }

  @include media($tablet) {
    padding: 0;

    > li {
      float: none;
      border-bottom: 1px solid hsla(0, 0%, 0%, 0.1);
      border-right: 0;

      &:first-child {
        margin: 0;
      }

      &:last-child {
        border-bottom: 0;
      }
    }
  }

 $padding-y: 12px;
  li.title {
    padding: $padding-y 30px $padding-y 20px;
    font-size: $base-font-size-small-2;
    text-transform: uppercase;
    font-weight: 700;
    color: #fff;

    @include media($small-screen) {
      display: none;
    }

    @include media($tablet) {
      display: block;
      padding-left: 15px;
    }
  }

  li.title.results-context-toggle{
    text-transform: none;
  }

  li.title.results-context-toggle:hover{
    cursor: pointer;
  }

  li.dropdown {
    position: relative;
    @include transition(padding 0.1s);

    &:hover,
    &.open a.dropdown-toggle {
      background: $header-background-3;
      box-shadow: -1px 0 0 hsla(0, 0%, 0%, 0.1);
      position: relative;

      @include media($tablet) {
        box-shadow: none;
      }
    }

    &.active {
      a.dropdown-toggle {
        background: $nav-hover; //purple
      }
    }

    a.dropdown-toggle {
      color: #fff;
      display: block;
      font-size: $base-font-size-small-1 - 1px;
      font-weight: 600;
      padding: $padding-y 24px $padding-y 10px;
      position: relative;
      text-decoration: none;

      &:after {
        @include triangle(8px, hsla(0, 0%, 100%, 0.6), down);
        position: absolute;
        content: "";
        right: 8px;
        top: calc(50% - 2px);
      }
    }
  }

  $button-height: 44px;
  $button-width: 106px;
  li.active ~ li.button-wrapper {
    button {
      @include transform(translateX(0)); // show button
    }

    @include media($tablet) {
      height: $button-height; // show button
    }
  }

  li.button-wrapper {
    overflow: hidden;
    position: absolute;
    right: 0;


    @include media($tablet) {
      height: 0; // hide button
      position: static;
      @include transition(all 0.4s $ease-out-cubic);
    }

    button {
      border-radius: 0;
      border-width: 0 0 0 1px;
      font-size: $base-font-size-small-2;
      font-weight: 700;
      height: $button-height;
      padding: 5px 10px;
      text-transform: uppercase;
      @include transform(translateX($button-width)); //hide button
      @include transition(all 0.5s $ease-out-cubic);
      width: $button-width;

      @include media($tablet) {
        border-width: 1px 0 0 0;
        display: block;
        @include transform(translate(0));
        width: 100%;
      }
    }
  }

  ol.dropdown-menu {
    @extend %dropdown-menu;

    li.active {
      @extend %active-filter;
    }

    a {
      color: darken($base-font-color-2, 15%);
      padding-left: 28px;
    }
  }
}

.total-count {
  display: block;
  font-size: 10px;
  color: #888;
  font-weight: 700;
  line-height: 1.2;
  margin-top: 2px;
}
