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

.main {
  position: relative;

  .search-input {
    border-radius: 30px;
    padding-inline-start: 30px;
    padding-inline-end: 30px;
    height: 32px;
    box-sizing: border-box;
    width: 100%;

    &::placeholder {
      color: $font-light-gray;
    }
  }

  .search-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 11px;
    height: auto;
    margin-top: -1px;
    color: $clickable-item;
    cursor: pointer;

    [dir='rtl'] & {
      right: 10px;
      left: auto;
    }
  }

  .clear-icon {
    position: absolute;
    top: calc(50% + 2px);
    transform: translateY(-50%);
    right: 10px;
    height: auto;
    margin-top: -1px;
    color: $clickable-item;
    cursor: pointer;

    [dir='rtl'] & {
      left: 10px;
      right: auto;
    }
  }
}