/**
* Mixins to search input.
*/

@mixin search-input-wrapper {
  padding: $spacing-20;
  border: 1px solid $color-black;
  display: flex;
  column-gap: $spacing-16;
  align-items: center;

  &::after {
    content: '';
    display: inline-block;
    width: $spacing-16;
    height: $spacing-16;
    flex-shrink: 0;
    background-color: $color-black;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    mask-origin: content-box;
    mask-image: url('@/assets/icons/search.svg');
  }
}

@mixin search-input {
  @include reset-input;
  @include text-x-small;

  font-weight: $font-weight-medium;
  width: 100%;
  color: $color-black;

  &::placeholder {
    color: $color-black;
    opacity: 1;
  }

  &::after {
    content: '';
  }
}

@mixin search-clean {
  @include btn-icon('close', $color-black, $color-black);

  padding: 0;
}