@import '../../scss/styles';

@layer payload-default {
  [dir='rtl'] .search-filter {
    svg {
      right: base(0.5);
      left: 0;
    }
    &__input {
      padding-right: base(2);
      padding-left: 0;
    }
  }
  .search-filter {
    position: relative;

    svg {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: base(0.5);
    }

    &__input {
      @include formInput;
      height: auto;
      padding: 0;
      box-shadow: none;
      background-color: var(--theme-elevation-50);
      border: none;

      &:not(:disabled) {
        &:hover,
        &:focus {
          box-shadow: none;
        }
      }
    }
  }
}