// Search
//
// A simple search styling.
//
// Markup: search.hbs
//
// Style guide: components.search


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

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

  &__wrapper {
    width: 100%;
    padding: 15px 20px;

    @include respond-to('medium') {
      position: relative;
      bottom: 0;
      padding: 14px 5px 5px;
    }
  }

  &__inner-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
    border-bottom: 1px solid color(search-border);
  }

  &__input-wrapper {
    margin: 0;
    // scss-lint:disable ImportantRule
    display: block !important;
  }

  &__input {
    @include box-shadow(none);
    @include font-size(18px);
    font-weight: weight(bold);
    background: none;
    border: 0;
    font-style: italic;
    width: 100%;
    padding: 12px;

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

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

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

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

  // Ensure button is positioned above the icon.
  &__button-position {
    position: absolute;
    top: 0;
    right: 0;
  }

  &__button-wrapper {
    @extend %search__button-position;
    width: 3.5em;
    height: 3em;
    display: block;
    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 {
    @extend %search__button-position;
    margin: 0 .75em;
    padding: 12px 0;
    color: currentColor;
  }

  &__button {
    @extend %search__button-wrapper;
    padding: 0;
    margin: 0;
    border: 0;
    // Button should be transparent.
    background: none;
    text-indent: -999em;

    &--light {
      @include respond-to('medium') {
        bottom: 0;
        padding: 0;
        // Button should be transparent.
        background: none;
      }
    }
  }
}

// Fugly selectors.
// scss-lint:disable IdSelector

.block-search,
.block-search-api-page {
  @extend %search__wrapper;
}

.search-form,
#search-api-page-search-form-default-search {
  @extend %search;

  > div {
    @extend %search__inner-wrapper;
  }

  .form-item {
    @extend %search__input-wrapper;
  }

  .form-text {
    @extend %search__input;
  }

  .form-submit {
    @extend %search__button;
  }
}

.header #search-api-page-search-form-default-search {
  @extend %search--light;

  .form-text {
    @extend %search__input--light;
  }

  .form-submit {
    @extend %search__button--light;
  }

  .search__button-wrapper {
    @extend %search__button-wrapper--light;
  }
}
