$filter-width: 250px;
$search-field-wrapper-margin: $filter-width;
.c-search-page {
  &__close-button {
    display: inline-flex;
    align-items: center;
    box-shadow: none;
    position: absolute;
    right: $spacing--small;
    top: $spacing--small;
    @include font-size(16px, 20px);
    cursor: pointer;

    @include mq(desktop) {
      display: none;
    }

    span {
      box-shadow: $link;
      color: $brand-color;
      margin-right: $spacing--small;
    }

    .c-icon {
      color: $brand-color--dark;
      width: 24px;
      height: 24px;
    }
  }

  &__toggle-filter {
    @include mq(desktop) {
      display: none;
    }
    margin-bottom: $spacing;
  }

  &__filter-result-wrapper {
    @include mq(desktop) {
      display: flex;
    }
  }

  &__search-field-wrapper {
    padding: $spacing 0 $spacing 0;
    @include mq(desktop) {
      padding: $spacing--large 0 $spacing--large $spacing--small;
      margin-left: $search-field-wrapper-margin;
    }
    .c-search-field__input-wrapper {
      padding: 0;
      margin: 0;
      .c-search-field__button {
        @include mq($from: tablet, $until: desktop) {
          right: 2px;
        }
      }
    }
    @include mq($until: desktop) {
      .c-active-filters {
        display: none;
      }
    }
  }

  &__active-filters {
    margin-bottom: $spacing;

    @include mq(desktop) {
      display: none;
    }
  }

  &__filter-wrapper {
    display: none;

    @include mq($until: desktop) {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      overflow: auto;
      background: $white;
      margin-right: 0;
      z-index: 100;
      padding-top: $spacing * 3;
    }

    flex-basis: $filter-width;
    flex-shrink: 0;
    margin-right: $spacing--small;
    text-align: center;

    &--expanded {
      display: block;
      position: fixed;
      padding-bottom: $spacing--large;
      animation: slideIn 0.5s;
    }

    @include mq(desktop) {
      display: block;
      width: $filter-width;
    }
  }

  &__filter-heading {
    text-align: left;
    text-transform: uppercase;
    display: none;
    margin: 0;
    font-weight: 600;
    @include font-size(18px, 32px);

    @include mq(desktop) {
      display: block;
    }
  }

  &__filters {
    & > .c-button {
      margin-top: $spacing;
    }
  }

  &__result-label {
    &--large-screen {
      @include mq($until: desktop) {
        display: none;
      }
    }
    &--small-screen {
      @include mq(desktop) {
        display: none;
      }
    }
  }

  &__result-wrapper {
    flex-grow: 1;

    h2 {
      margin: 0;
      font-weight: 600;
      @include font-size(14px, 32px);
      margin-bottom: $spacing--small / 2;

      @include mq(desktop) {
        @include font-size(18px, 32px);
        margin-bottom: 0;
      }
    }
  }
}