.search-tools {  
  ///////////////////////////////////////////////////////////////////////////////////
  $base-border-color: gainsboro !default;
  $base-border-radius: 3px !default;
  $base-line-height: 1.5em !default;
  $base-spacing: 1.5em !default;
  $base-accent-color: #477DCA !default;
  $base-link-color: $base-accent-color !default;
  $dark-gray: #333 !default;
  $large-screen: em(860) !default;
  $base-font-color: $dark-gray !default;
  
  ol {
    margin: 0;
    padding: 0;
  }

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

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

  $search-tools-border-color: $base-border-color;
  $search-tools-background: lighten($search-tools-border-color, 10%);

  @include clearfix;
  background: $search-tools-background;
  border-radius: $base-border-radius;
  border: 1px solid $search-tools-border-color;
  padding: $gutter / 2;

  .filter {
    margin-bottom: 1em;

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

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

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

      label {
        cursor: pointer;
        font-weight: 400;
        margin-bottom: 0;
      }
    }

    ol {
      margin-top: 1em;

      label {
        display: inline;
      }
    }

    button {
      @include button(simple, lighten($search-tools-background, 10%));
      @include position(absolute, 5px 5px auto auto);
      font-size: 0.7em;
    }

    .hide-options {
      margin-bottom: 0;

      ol, button {
        display: none;
      }
    }
  }

  .trigger {
    width: 100%;

    @include media($large-screen) {
      @include span-columns(1.5);
    }

    button {
      @include button(flat, $base-accent-color);
      margin-top: 1em;
      padding-bottom: 0.5em;
      padding-top: 0.5em;
      width: 100%;

      @include media($large-screen) {
        margin-top: 1.55em;
      }
    }
  }
}