Search Bar

/* Search Bar */

.search-bar {
  position: relative;
  border-bottom: 2px solid $gray-dark;

  &__input {
    @include typography-level('search-bar');

    width: 100%;
    max-width: 100%;
    padding: 2px 2.2rem 2px 0.2rem;
    border: 0 none;

    &:focus {
      outline: none;
    }

    &::placeholder {
      opacity: 1;
      color: $gray-dark;
    }

    // stylelint-disable-next-line order/order
    @include breakpoint(pre-large) {
      @include typography-level('search-bar-pre-medium');
    }
  }

  &__btn {
    $symbol: map-get($icons, 'search');

    position: absolute;
    top: 2px;
    right: 0;
    display: inline-block;
    height: 2rem;
    margin: 0;
    padding: 0;
    outline: 0 none;
    border: 0 none;
    background-color: $transparent;
    vertical-align: middle;
    line-height: 2rem;
    color: $black;
    cursor: pointer;

    &::after {
      @include icon-content-extended($symbol, inline-block);

      width: 2rem;
      height: 2rem;

      line-height: inherit;
      color: inherit;
      text-align: center;
    }

    &:hover {
      color: $primary;
    }
  }
}