// Search
//
// A simple search styling.


.search,
%search {
  color: color(search-color);
  background: color(search-bg);

  &--light {
    @include respond-to('header-desktop') {
      color: color(search-color-light);
      background: transparent;
    }
  }

  &__wrapper {
    // Inherit from agov_base.
  }

  &__inner-wrapper {
    border-bottom: 1px solid color(search-border);
  }

  &__input-wrapper {
    // Inherit from agov_base.
  }

  &__input {
    @include font-size(18px);
    font-weight: weight(bold);
    font-style: italic;

    &--light {
      @include respond-to('medium') {
        border-bottom: 2px solid color(search-border);

        @include input-placeholder() {
          color: color(search-color-light);
        }

        &:hover,
        &:focus {
          border-color: color('white');
        }
      }
    }
  }

  // Ensure button is positioned above the icon.
  &__button-position {
    // Inherit from agov_base.
  }

  &__button-wrapper {
    color: color('search-button');

    &:focus,
    &:hover {
      color: color('search-color');
      background: none;
    }

    &--light {
      color: color('search-button-light');

      &:focus,
      &:hover {
        color: color('white');
        background: none;
      }
    }
  }

  &__icon {
    @include font-size(25px);
    color: color('search-button');
  }

  &__button {
    border: 0;

    &,
    &:hover,
    &:focus {
      // Button should be transparent.
      background: none;
    }

    &--light {
      @include respond-to('header-desktop') {
        // Button should be transparent.
        background: none;
      }
    }
  }
}
