// Dependencies.
@import 'init';

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


.search,
%search {
  position: relative;

  &__wrapper {
    @include padding(15px 20px);

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

    &--light {
      display: none;
      float: right;

      @include respond-to('header-desktop') {
        display: block;
      }
    }
  }

  &__inner-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
  }

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

  &__input {
    // Your styles.

    &--light {
      @include respond-to('medium') {
        min-width: 363px;
      }
    }
  }

  // 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;

    &:focus,
    &:hover {
      background: none;
    }

    &--light {

      &:focus,
      &:hover {
        background: none;
      }
    }
  }

  &__icon {
    @extend %search__button-position;
    @include margin(0 .75);
    @include padding(.5 0);
    @include font-size(25px);
    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('header-desktop') {
        bottom: 0;
        padding: 0;
        // Button should be transparent.
        background: none;
      }
    }
  }
}
