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

@include bem(popout-input) {
  @include b() {
    @include universal;
    justify-content: center;
    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(show-clear) {
      margin-left: 0;
    }
  }

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

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

  // # 紧凑模式
  @include m(compact-horizontal) {
    width: auto;
    flex: 0 1 auto;

    &:not(:first-child) {
      --sar-popout-input-start-radius: 0;
      margin-left: -1px;
    }

    &:not(:last-child) {
      --sar-popout-input-end-radius: 0;
    }
  }

  @include m(compact-block) {
    flex: 1 1 auto;
  }
}