.search-filter-bar {
  display: flex;

  .search {
    position: relative;

    form {
      display: flex;
      align-items: center;
      background-color: $base-white;
    }

    input {
      padding: $base-spacing;
      width: 100%;
      height: 50px;
      border: 1px solid $boulder-400;
      outline: none;

      &:focus {
        color: $base-black;
        border-color: $sky-blue-500;
      }
    }

    .search-button {
      position: absolute;
      right: 0;
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: $base-spacing-half;
      border-radius: 2px;

      &:hover {
        background-color: $base-black-10p;
      }

      &:active {
        background-color: $base-black-20p;
      }
    }
  }

  .filter {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
    align-items: center;

    .form-field {
      margin-bottom: 0;
      margin-left: $base-spacing-half;
    }

    .select {
      &-menu {
        li.select-menu-option {
          padding: $base-spacing;
          .checkboxes {
            padding: 0;
            margin: 0;
            line-height: 1;
            align-items: center;
          }
        }
      }
    }

    .multi-select .select-toggle {
      border-color: transparent;
      padding-right: 36px; // 8 px from text to dropdown caret, 16px of caret, 12px from caret to right border

      &.active {
        background-color: $gallery-100;
        border: 1px solid $gallery-100;
        &::after {
          content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="%23757575"><path fill-rule="evenodd" d="M20.7343997,7.20340672 C21.0369343,6.9196125 21.5124245,6.93461618 21.7964369,7.23691839 C22.05463,7.51173857 22.0656928,7.92938754 21.8382717,8.21627127 L21.7628995,8.29813984 L12.8478053,16.6609927 C12.4000257,17.0810349 11.7203768,17.1107014 11.2398501,16.7502163 L11.1326902,16.6601017 L2.23653106,8.29760525 C1.93429195,8.01349685 1.91977114,7.53835648 2.20409793,7.23634952 C2.46257683,6.96179775 2.87905475,6.92484705 3.17971854,7.1338526 L3.26616944,7.20394131 L11.9903648,15.4047756 L20.7343997,7.20340672 Z"/></svg>');
        }
      }
    }
  }

  @media only screen and (max-width: map-get($base-breakpoints, 'md')) {
    flex-direction: column;

    .filter {
      .form-field {
        margin-left: 0;
        margin-top: $base-spacing-half;
        min-width: 100%;
      }
    }
  }
}