.search-tools {
  $base-border-color: gainsboro !default;
  $base-border-radius: 3px !default;
  $base-line-height: 1.5em !default;
  $base-spacing: 1.5em !default;
  $action-color: #477DCA !default;

  $dark-gray: #333 !default;
  $large-screen: 53.75em !default;
  $base-font-color: $dark-gray !default;
  $clear-button-width: 4em;
  $search-tools-border-color: $base-border-color;
  $search-tools-background: lighten($search-tools-border-color, 10%);

  @include clearfix;
  background: $search-tools-background;
  border: 1px solid $search-tools-border-color;
  border-radius: $base-border-radius;
  display: flex;
  justify-content: space-between;
  padding: $gutter ($gutter / 2);
  width: 100%;

  li {
    font-size: 0.8em;
    line-height: 1.5em;
    list-style: none;
  }

  label {
    display: block;
    font-weight: bold;
    margin-bottom: $base-spacing / 4;
  }

  .filters {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;

    @include media($large-screen) {
      flex-direction: row;
    }
  }

  .filter {
    flex-grow: 1;
    flex-shrink: 1;
    margin: 0 0.2em 1em 0.2em;

    @include media($large-screen) {
      margin-bottom: 0;
    }

    > div {
      background-color: white;
      border: 1px solid $base-border-color;
      border-radius: $base-border-radius;
      box-sizing: border-box;
      font-size: 1em;
      margin-bottom: $base-spacing / 2;
      padding: ($base-spacing / 3) $clear-button-width ($base-spacing / 3) ($base-spacing / 3);
      position: relative;
      transition: border-color;
      width: 100%;

      &:focus,
      &:hover {
        border-color: darken($base-border-color, 10%);
      }

      label {
        cursor: pointer;
        margin-bottom: 0;
      }
    }

    .filter-list {
      margin: 1em 0 0;
      padding: 0;

      label {
        display: inline;
      }
    }

    button.clear {
      @include position(absolute, 5px 5px auto auto);
      font-size: 0.7em;
      max-width: $clear-button-width;
    }

    .hide-options {
      margin-bottom: 0;

      ol, button {
        display: none;
      }
    }
  }

  .trigger {
    margin-top: 1.5em;

    button {
      display: block;
      padding: 0.5em 1em;
      text-align: center;
      width: 100%;
    }
  }
}