
@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;
      }

      render-svg {
        &, & svg {
          width: 1rem;
          height: 1rem;
          float: left;
          padding-right: 0.25rem;

          path {
            @include csstrans;

            fill: $base-clr;
          }
        }
      }

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

        render-svg {
          svg {
            path {
              fill: $hover-clr;
            }
          }
        }
      }

      &.disabled {
        opacity: 0.6;

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

          render-svg {
            svg {
              path {
                fill: $base-clr;
              }
            }
          }
        }
      }

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

        render-svg {
          svg {
            path {
              fill: white;
            }
          }
        }
      }
    }
  }
}

// Alert when search, taxon, filter is triggered

.alert-box.search-alert {
  background-color: $white;
  color: #777;
  font-size: 1em;
  padding: 0.35em 0 0;
  border: 0;
  margin: 0;

  .clear-all {
    color: $grey-500;
    margin-left: 1.5em;

    &:hover {
      color: $grey-600;
    }
  }

  .no-results-bar {
    @include breakpoint(desktop) {
      text-align: center;
    }
  }

  .no-results {
    color: $grey-800;
    font-style: italic;
    font-size: 1.25em;
  }

  .clear-search {
    background-color: transparent;
    padding: 0;
    margin: 0;
    color: $orange-500;
    font-size: 1.25em;

    &:hover {
      color: $orange-400;
    }
  }

  span {
    color: $grey-800;
    font-style: italic;

    &.applied-taxons, &.applied-properties {
      color: $clr-blue;
      font-weight: bold;

      .join-word {
        font-weight: normal;
      }
    }

    &.applied-search {
      font-weight: bold;
      color: $teal-500;
    }
  }
}

.sticky-shop-filters-container {
  position: sticky;
  top: $topbar-height;
  max-height: calc(100vh - #{$topbar-height});
  overflow-y: auto;
}

.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;
  }
}
