.search {
  display: flex;
  align-items: center;
  border: 0;
  margin: 0;
  @include mq($from: desktop) {
    border: 0;
    max-width: 100%;
    border-radius: 5px;
  }

  & form {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
  }

  & input {
    height: 46px;
    border: 0;
    background-color: transparent;
    @include mq($from: desktop) {
      height: 50px;
    }
  }

  & .form-field {
    margin: 0;
    max-width: 100%;

    &--select {
      max-width: 200px;
    }
  }

  &--toggle {
    line-height: 0;
    border: 0;
    margin-top: 0;
    @include mq($from: desktop) {
      border: 0;
    }

    & input {
      height: 40px;
    }
  }

  &__wrapper {
    display: flex;
    align-items: center;
    flex: 1 1 auto;

    &--toggle {
      display: none;
      position: absolute;
      right: 50px;
      left: 5px;
      top: 50%;
      transform: translateY(-50%);
      border: 1px solid $white;
      border-radius: 3px;
      background: $white;
    }
  }

  &__icon {
    opacity: 1;
    display: flex;
    height: 32px;
    width: 32px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: $white;

    &:hover {
      opacity: .8;
    }

    & i {
      font-size: 1.5rem;
    }

    & .search-close {
      display: none;
    }

    &.open {
      & .search-close {
        display: block;
      }

      & .search-open {
        display: none;
      }
    }
  }
}

.row--search {
  & h2 {
    white-space: nowrap;
    letter-spacing: $x-small-space;
    font-size: $size-x-small;
    font-weight: $font-semi-bold;
    margin: 0;
  }

  & .form-field {
    max-width: 200px;
  }
}