gistfile1.sass

.filter {
  @include row;
  background: darken($gray-5, 2%);
  padding: em(8) 0 em(8) em(30);

  &-heading {
    @include span-columns(2.25);
    font-weight: $medium-font-weight;
    line-height: em(36);
  }

  &-group {
    @include span-columns(2.5);
  }

  &-option {
    @include size(36px);
    color: $gray-3;
    cursor: pointer;
    float: left;
    font-size: em(14);
    font-weight: $medium-font-weight;
    line-height: rem(36);
    margin: 0 em(18) 0 0;
    text-align: center;
    text-transform: uppercase;

    svg {
      max-height: 100%;
    }

    &--active {
      background: transparentize($gray-2, 0.5);
      border-radius: $base-border-radius;
      color: white;

      .filter-option-fill {
        fill: white;
      }

      .filter-option-fill--opposite {
        fill: #bec2c5;
      }
    }

    &-fill {
      fill: $gray-3;
    }

    &-tablet {
      margin-top: em(4);
    }
  }

  &-select {
    @include appearance(none);
    background: image-url("arrow-down.svg") no-repeat right 55%;
    border: none;
    color: $gray-3;
    line-height: em(36);
    margin: 0;
    padding-right: em(20);

    &:focus {
      outline: none;
    }
  }
}