.search {
  width: 100%;
  border-top: 1px solid $grey-light;
  border-bottom: 1px solid $grey-light;
  display: flex;
  @include mq($from: desktop) {
    border-radius: 3px;
    max-width: 400px;
    border: 1px solid $grey;
  }

  & form {
    display: flex;
    width: 100%;
  }

  & input {
    border: 0;
    height: 46px;
    padding: 10px 15px;
    @include mq($from: desktop) {
      height: 46px;
    }
  }

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

  &--toggle {
    display: flex;
    line-height: 0;
    position: relative;
    border: 0;
    margin-top: 50px;
    @include mq($from: desktop) {
      border: 1px solid $grey;
    }

    & input {
      height: 40px;
    }
  }

  &__wrapper {
    width: 100%;
    display: flex;
    align-items: center;

    &--toggle {
      display: none;
      position: absolute;
      right: 34px;
      left: 0;
      width: auto;
      border: 1px solid $grey;
      border-radius: 3px;
      @include mq($from: desktop) {
        display: flex;
        position: relative;
        right: auto;
        left: auto;
        width: 100%;
        border: 0;
      }
    }
  }

  &__icon {
    margin-left: auto;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    color: $black;
    @include mq($from: desktop) {
      display: none;
    }

    & i {
      font-size: 1.5rem;
    }

    & .search-close {
      display: none;
    }

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

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