@import '~styles/config';

.search {
  display: flex;
  align-items: center;

  position: relative;

  transition: width 300ms ease-in-out;

  @media (max-width: $max-tablet) {
    padding: 0 $gutter;
  }


  &.isSearchOnFocus {
    @media (min-width: $min-tablet) {
      position: absolute;
      z-index: 18;

      width: 100%;
      background-color: $color-white;
    }
  }

  &__iconButton {
    @include reset-button;
    height: 40px;
    width: 40px;

    cursor: pointer;
  }

  &__svg {
    @include btn-fill-colors;

    display: block;
    margin-right: 20px;
    height: 22px;
    width: 22px;
  }

  &__input {
    @include reset-input;
    @include responsive-font(16, 18);

    width: calc(100% - 42px);
    height: 60px;

    color: $color-dark;

    background-color: transparent;

    box-shadow: none;

    @media (min-width: $min-tablet) {
      width: 0;
    }

    &:focus {
      color: $font-color;
    }

    &.showClear {
      width: calc(100% - 52px);
      @media (min-width: $min-tablet) {
        width: calc(100% - 77px);
      }
    }
  }

  &__clear {
    display: flex;
    align-items: center;
    justify-content: center;

    position: absolute;
    right: 0;

    width: 40px;
    height: 40px;

    cursor: pointer;

    &SVG {
      padding: 4px;

      height: 18px;
      width: 18px;

      border-radius: 100%;
      background: $color-grey400;

      path { //stylelint-disable-line
        fill: $color-white;
      }
    }
  }
}