@mixin filter-selector($base-clr, $border-clr, $hover-clr) {
  &.inline-block, ul.inline-block {
    display: inline-block;
  }

  li {
    display: inline-block;

    @include border-radius(0);

    padding: 0;
    margin: 0 0.5rem 0.5rem 0;

    &:hover, &:focus {
      background: transparent;
    }

    &.active {
      box-shadow: none;
    }

    a, a.button {
      display: block;

      @include border-radius(0.5em);

      border: 1px solid $border-clr;
      padding: 0.5em 0.625em;
      color: $base-clr;
      font-size: 0.75em;
      background: white;
      margin: 0;

      i {
        padding-left: 0.25rem;
      }

      &:hover, &:focus {
        border-color: $hover-clr;
        color: $hover-clr;
      }

      &.disabled {
        opacity: 0.6;

        &:hover, &:focus {
          border-color: $border-clr;
          color: $base-clr;
        }
      }

      &.active, &.active:hover, &.active:focus {
        border: 1px solid $base-clr;
        background: $base-clr;
        color: white;
      }
    }
  }
}

.filter-shopfront {
  &.taxon-selectors, &.property-selectors {
    background: transparent;
  }

  // Shopfront taxons
  &.taxon-selectors {
    @include filter-selector($clr-blue, $clr-blue-light, $clr-blue-bright);
  }

  // Shopfront properties
  &.property-selectors {
    @include filter-selector(#666, #ccc, #777);
  }

  ul {
    margin: 0;
  }
}

