//-- Search

.topbar__search {
  @include set-col(lg, 3);

  @include media-min(lg) {
    width     : 100%;
    height    : 38px;

    background: $white;

    border    : 3px solid $black;

    position  : relative;
  }

}

.search__btn {
  & svg {
    width   : 25px;
    height  : 25px;

    &.cross {
      stroke        : black;
      fill          : transparent;
      stroke-linecap: round;
      stroke-width  : 3;
      height        : 10px;
      width         : 10px;
    }

    position: relative;
    z-index : 2;
  }

  // transform: translateY(-50%);
  @include media-max(lg) {

    margin-left: 20px;

    width      : 33px;
    height     : 33px;
  }

  @include media-min(lg) {
    margin-right  : 10px;
    height        : 100%;

    position      : absolute;
    top           : 0;
    right         : 0;

    pointer-events: none;
    cursor        : pointer;

    & svg {
      width : 15px;
      height: 15px;
    }

  }

}

.search__input {
  display      : flex;

  background   : transparent;
  border       : transparent;
  margin-bottom: 0;

  text-indent  : 0;

  @include media-max(lg) {
    width         : calc(100% - 40px);
    opacity       : 1;

    position      : absolute;
    top           : calc(100% + 20px);
    left          : 20px;

    opacity       : 0;
    transform     : translateY(20px);
    pointer-events: none;

    transition    : opacity .2s ease, transform .2s ease;

    .isActiveSearch & {
      opacity       : 1;
      pointer-events: auto;
      transform     : translateY(0);
    }

  }

  &::placeholder {
    color: $mediumgrey;
  }

  &-field {
    flex   : 1 75%;
    border : 0 solid $black;
    padding: 4px;

    @include media-max(lg) {

      background: $lightgrey;
      border    : 3px solid $black;

      padding   : 20px;
    }
  }

  &-btn {
    flex      : 1 25%;
    border    : 0 solid $black;
    padding   : 8px;
    cursor    : pointer;

    background: $black;

    color     : $white;
    @include media-min(lg) {
      width  : 33px;
      flex   : 1 33px;

      opacity: 0;
    }
    @include media-max(lg) {
      border: 3px solid $black;
    }
  }
}