@import "../../styles/variables.scss";

.searchContainer {
  position: relative;

  .searchIcon {
    color: $brand-grey;
    display: inline-block;
    position: absolute;
    text-align: center;
    line-height: $base-input-height;
    top: 1px;
    left: $m-spacing;
  }
}

.searchInput {
  background-color: $base-input-background;
  border-radius: $base-border-radius;
  border: 1px solid $brand-lightGrey;
  line-height: $base-input-height;
  height: $base-input-height;
  width: 100%;
  font-size: $body-font-size;
  padding: 0 $s-spacing 0 $xxl-spacing;

  &:focus {
    background: $brand-white;
    border-color: transparent;
    box-shadow: 0 0 0 2px $brand-blue;
    outline: none;
  }

  &::placeholder {
    color: $brand-grey;
  }
}