// ============================================================================
// :: Search
// ============================================================================
/**
 * Input field mainly focused on receiving keywords used to search for certain
 * elements.
 */

// ============================================================================
// :: Settings
// ============================================================================
$spacing-horizontal: 2rem;
$icon-width: 1.6rem;

// ============================================================================
// :: Root
// ============================================================================
.bp-search {
  position: relative;

  display: inline-block;
  min-width: 25rem;
}

// ============================================================================
// :: Elements
// ============================================================================
.bp-search__container {
  position: relative;

  width: 100%;
}

.bp-search__field {
  width: 100%;

  /**
   * Because the icon is position absolute we must add the width of the icon
   * to the left spacing. This way we create spacing between icon en text
   * input.
   */
  padding: 1.6rem $spacing-horizontal 1.6rem ($spacing-horizontal * 2) +
    $icon-width;

  line-height: $line-height-normalize;

  color: $bp-text-color-dark;
  background-color: $bp-background-color-medium-light;
  border-radius: 5rem;
  outline: none;
  border: none;

  @include placeholder() {
    color: $bp-text-color-medium;
  }

  &:focus {
    + .bp-search__icon {
      // style the icon generated by the iconfont
      &::before {
        color: $bp-text-color-dark;
      }
    }
  }
}

.bp-search__icon {
  position: absolute;
  top: 50%;
  left: $spacing-horizontal;

  transform: translateY(-50%);

  // style the icon generated by the iconfont
  &::before {
    color: $bp-text-color-medium;

    transition: color 0.3s ease-in-out;
  }
}