@use '../style/base' as *;

@include bem(popout-input) {
  @include b() {
    @include universal;
    cursor: pointer;

    @include m(down) {
      opacity: var(--sar-popout-input-active-opacity);
    }
  }

  @include e(append) {
    @include universal;
    flex-direction: row;
    align-items: center;
    gap: var(--sar-popout-input-append-gap);
  }

  @include e(loading) {
    font-size: var(--sar-popout-input-loading-size);
    color: var(--sar-popout-input-loading-color);
  }

  @include e(seal) {
    @include universal;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
  }

  @include e(arrow) {
    @include universal;
    font-size: var(--sar-popout-input-arrow-font-size);
    color: var(--sar-popout-input-arrow-color);
  }

  @include m(readonly, loading) {
    cursor: unset;
  }

  @include m(disabled) {
    cursor: not-allowed;
  }
}