_site-search.scss

//
// Site Search
//
// A global site search component
//
// Markup: templates/components/site-search/site-search.twig
//
// Style guide: Simple.Site Search
//
.su-site-search {
  position: relative;
}

.su-site-search__input {
  @include font-smoothing;
  @include padding(0.6rem 2rem);

  display: inline-block;
  height: 4rem;
  max-width: 100%;
  border-radius: 3rem;
  font-size: 1.6rem;

  &::placeholder {
    color: $su-color-black;
    opacity: 1; // For Firefox
  }
}

.su-site-search__sr-label {
  @include hide-visually;
}

.su-site-search__submit {
  @include padding(0);
  @include margin(0 0 0 null);

  background: url("#{$su-image-path}/icon-search.svg") no-repeat 0 0;
  opacity: 0.6;
  position: absolute;
  top: 1.1rem;
  right: 1.2rem;
  width: 24px;
  height: 25px;

  &:hover,
  &:active,
  &:focus {
    background-color: transparent;
    opacity: 1;
  }

  &:active,
  &:focus {
    box-shadow: none;
  }
}