@import 'variables';

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

    .search-button {
      position: absolute;
      height: 24px;
      width: 24px;

      &.small {
        top: 6px;
        left: 8px;
      }

      &.large {
        top: 28px;
        left: 24px;
      }
    }

    .clear-button {
      position: absolute;
      height: 24px;
      width: 24px;
      top: 2px;
      right: 8px;
    }

    .search-bar-input {
      border-radius: 4px;
      border-color: $stroke;
      box-shadow: 0 3px 12px 0 rgba(17, 17, 31, 0.04);
      width: 100%;

      &.large {
        height: 80px;
        padding: 16px 24px 16px 64px;
      }

      &.small {
        border: none;
        height: 36px;
        padding: 6px 6px 6px 36px;
      }

      &:focus {
        border-color: $stroke-focus;
      }

      &:focus + .search-button .icon-search:not(:hover) {
        background-color: $stroke-focus;
      }
    }

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

  .subtext {
    margin-top: 16px;
  }

  .error {
    color: red;
  }
}
