////
/// Search Module
/// @group search
////

@use 'src/module/spacing';

#{ns(search-bar)} {
  @include display-flex(row, null, null, wrap);

  &:not(#{ns(search-bar)}--labelled) #{ns(label)} {
    @include sr-only();
  }

  #{ns(input)} {
    @include margin(0);
    border-radius: spacing.space(1v) 0 0;
    @include max-height(10v);
    flex: 1;

    &::placeholder {
      font-style: italic;
    }

    &::-webkit-search-cancel-button {
      -webkit-appearance: none;
      @include size(4v, 4v);
      background-repeat: no-repeat;
      background-size: spacing.space(4v) spacing.space(4v);
    }
  }

  &--labelled {
    #{ns(label)} {
      @include margin-bottom(spacing.space(2v));
      flex-basis: 100%;
    }
  }

  #{ns(messages-group)} {
    flex-basis: 100%;
    order: 4;

    #{ns(message)} {
      &:first-child {
        @include margin-top(spacing.space(4v));
      }
    }
  }

  @include nest-btn(md, only, search-line) {
    flex: 0 0 auto;
    border-radius: 0 spacing.space(1v) 0 0;
  }

  &--lg {
    @include nest-btn(lg, left, null, md);

    #{ns(input)} {
      @include max-height(12v, md);
    }
  }
}