@import '../../../scss/index.scss';

// Селектор
@mixin selector () {
  @include reset-component();

  input {
    @include row-max();
  }
  input[disabled] + .clear {
    cursor: default;
    pointer-events: none;
    opacity: 0.2;
  }

  .selector {
    @include row-max();
    position: relative;
    overflow: hidden;
    height: 34px;
  }

  .input {
    padding-right: 32px + 8px;
  }

  .clear {
    @include col-auto();
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 32px;
    opacity: 0.6;
    cursor: pointer;
    transition: opacity 200ms ease;
    &:hover {
      opacity: 0.9;
    }
  }
  .clear__icon {
    width: 20px;
    height: 20px;
    margin: auto;
    fill: $fill;
    pointer-events: none;
  }
}