@import "responsive.scss";
@import "variables.scss";
@import "reset.scss";

.SearchBar-wrapper-2pAGL {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 50px;
  background: $colorWhite;
}

.SearchBar-inputWrapper-2T1z1 {
  display: flex;
  align-items: center;
  width: 100%;
  height: 30px;
}

.SearchBar-input-3NkGW {
  @include reset-input;
  margin-left: map-get($gutters, small) / 2;
  width: 100%;
  color: $colorGrey;

  font-size: 16px;

  &::-webkit-input-placeholder {
    color: rgba($colorGrey, 0.5);
  }

  &::-moz-placeholder {
    color: rgba($colorGrey, 0.5);
  }

  &:-ms-input-placeholder {
    color: rgba($colorGrey, 0.5);
  }

  &::-ms-input-placeholder {
    color: rgba($colorGrey, 0.5);
  }

  &::placeholder {
    color: rgba($colorGrey, 0.5);
  }
}

.SearchBar-button-3SPJm {
  @include reset-button;
  display: flex;
  align-items: center;
  justify-content: center;
}

.SearchBar-searchButton-1ueu0 {
  @include reset-button;
  @include maxMedia(large) {
    background-color: currentColor;
  }
  border-radius: 50%;
  width: 28px;
  height: 28px;
  line-height: 0;
}

.SearchBar-searchIcon-3Wpol {
  @include maxMedia(large) {
    width: 14px;
    height: 14px;
    path {
      fill: $colorWhite;
    }
  }
  @include media(large) {
    width: 18px;
    height: 18px;
    path {
      fill: currentColor;
    }
  }
}

.SearchBar-closeIcon-3WaMJ {
  height: 18px;
  path {
    fill: rgba($colorGrey, 0.5);
  }
}