@use '~@moda/om';

.SearchInput {
  $icon-width: om.space(7);

  position: relative;
  display: inline-block;

  &__icon,
  &__clear {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    bottom: 0;
    width: $icon-width;
    height: 100%;
    color: om.color(cement);
  }

  &__input--round-borders {
    border-radius: 2.5rem;
  }

  &__input--no-borders {
    border: none;
  }

  &__icon {
    left: 0;
    pointer-events: none;
    z-index: 1;
  }

  &__clear {
    right: 0;

    &:hover {
      color: om.color(ink);
      cursor: pointer;
    }
  }

  > input {
    width: 100%;
    padding-right: $icon-width;
    padding-left: $icon-width;

    &::-webkit-search-decoration,
    &::-webkit-search-cancel-button,
    &::-webkit-search-results-button,
    &::-webkit-search-results-decoration {
      display: none;
    }
  }
}