@import "../../helpers";
// todo: after replace <input> to <SfInput> we can remove @mixin placeholder and @mixin iconPosition
@mixin placeholder {
  &::-webkit-input-placeholder {
    @content;
  }
  &::-moz-placeholder {
    @content;
  }
  &:-ms-input-placeholder {
    @content;
  }
}
@mixin iconPosition {
  flex-direction: var(--search-bar-icon-flex-direction, row);
  .sf-search-bar__input {
    --search-bar-input-text-align: center;
    &::placeholder {
      text-align: center;
    }
  }
}
.sf-search-bar {
  box-sizing: border-box;
  position: relative;
  display: var(--search-bar-display, flex);
  align-items: center;
  background: var(--search-bar-background);
  padding: var(--search-bar-padding);
  width: var(--search-bar-width);
  height: var(--search-bar-height, 2rem);
  &__button {
    position: absolute;
    bottom: var(--spacer-xs);
    right: var(--search-bar-button-right, 0);
  }
  &__icon {
    --icon-size: 1.25rem;
    display: var(--search-bar-icon-display, block);
  }
  &__input {
    position: relative;
    flex-grow: 1;
    background: transparent;
    text-align: var(--search-bar-input-text-align);
    width: 100%;
    height: 100%;
    @include font(
      --search-bar-font,
      var(--font-weight--normal),
      var(--font-size--base),
      1.6,
      var(--font-family--secondary)
    );
    @include border(
      --search-bar-border,
      0 0 2px 0,
      solid,
      var(--c-dark-variant)
    );
    @include placeholder {
      color: var(--search-bar-placeholder-color, var(--c-gray));
      transition: var(--search-bar-placeholder-transition, color 0.2s ease-in);
      font: inherit;
    }
    &:focus {
      --search-bar-border-color: var(--c-primary);
      @include placeholder {
        color: var(--search-bar-placeholder-color-focus, transparent);
      }
    }
    &::-webkit-search-cancel-button {
      opacity: 0;
    }
    &[type="search"] {
      -webkit-appearance: none;
    }
    &::-ms-clear {
      opacity: 0;
    }
  }
  &--position-center {
    @include iconPosition();
  }
  &--no-icon {
    --search-bar-icon-display: none;
  }
  @include for-desktop {
    --search-bar-width: 20rem;
  }
}