@import 'variables';

#search-bar {
  .search-bar-form {
    position: relative;

    .search-bar-button {
      position: absolute;
      height: 24px;
      width: 24px;
      top: 28px;
      left: 24px;
    }

    .search-bar-input {
      border-radius: 4px;
      border-color: $gray-light;
      box-shadow: 0 3px 12px 0 rgba(17, 17, 31, 0.04);
      color: $text-dark;
      font-family: $font-family-sans-serif-bold;
      font-size: 26px;
      font-weight: $font-weight-sans-serif-bold;
      height: 80px;
      width: 100%;
      padding: 16px 24px 16px 64px;

      &:focus {
        border-color: $brand-color-4;
      }
    }

    .search-bar-input:focus + .search-bar-button {
      img.icon {
        background-color: $brand-color-4;
      }
    }

    @media (max-width: $screen-md-max) {
      .search-bar-button {
        left: 16px;
        top: 18px;
      }
      .search-bar-input {
        font-size: 24px;
        padding: 16px 16px 16px 48px;
        height: 60px;
      }
    }
  }

  .subtext {
    color: $text-medium;
    margin-top: 16px;
  }

  .error {
    color: red;
  }
}
