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

@include bem(input) {
  @include b() {
    @include universal;
    justify-content: center;
    width: 100%;
    padding: var(--sar-input-padding-y) var(--sar-input-padding-x);
    border: 1px solid var(--sar-input-border-color);
    border-radius: var(--sar-input-border-radius);
    transition: var(--sar-input-transition-duration);

    @include m(borderless) {
      padding-top: var(--sar-input-padding-borderless-y);
      padding-bottom: var(--sar-input-padding-borderless-y);
      border-width: 0;
    }

    @include m(inlaid) {
      padding: 0;
      border-width: 0;

      @include e(tools) {
        min-width: 0;
        margin-right: 0;
      }

      @include e(append) {
        margin-right: 0;
      }
    }

    @include m(focused) {
      border-color: var(--sar-input-focused-border-color);
      z-index: 1;
    }

    @include m(disabled) {
      background: var(--sar-disabled-shallow-bg);
    }
  }

  @include e(content) {
    @include universal;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  @include e(control) {
    @include universal;
    z-index: 0;
    flex: 1;
    align-self: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border-width: 0;
    font-size: var(--sar-input-control-font-size);
    line-height: var(--sar-input-control-line-height);
    background: var(--sar-input-bg);

    @include m(input) {
      height: var(--sar-input-control-input-height);
    }

    @include m(textarea) {
      height: var(--sar-input-control-textarea-height);
      min-height: var(--sar-input-control-textarea-height);
    }

    @include m(input-min-height) {
      min-height: var(--sar-input-control-input-height);
      line-height: var(--sar-input-control-input-height);
    }
  }

  @include e(tools) {
    @include universal;
    flex-direction: row;
    align-items: center;
    min-width: var(--sar-input-padding-x);
    margin-right: calc(var(--sar-input-padding-x) * -1);
  }

  @include e(prepend, append) {
    @include universal;
    align-items: center;
    justify-content: center;
    flex: none;
  }

  @include e(prepend) {
    margin-right: var(--sar-input-prepend-margin-right);
  }

  @include e(append) {
    margin-right: var(--sar-input-append-margin-right);
  }

  @include e(clear) {
    @include universal;
    z-index: 2;
    flex: none;
    width: auto;
    align-self: stretch;
    justify-content: center;
    align-items: center;
    margin-right: var(--sar-input-clear-margin-right);
    padding: 0 var(--sar-input-clear-padding-x);
    font-size: var(--sar-input-clear-font-size);
    color: var(--sar-input-clear-color);
    cursor: pointer;

    @include m(hide) {
      display: none;
    }
  }

  @include e(eye) {
    @include universal;
    flex: none;
    width: auto;
    align-self: stretch;
    justify-content: center;
    align-items: center;
    margin-left: var(--sar-input-eye-margin-left);
    margin-right: var(--sar-input-eye-margin-right);
    padding: 0 var(--sar-input-eye-padding-x);
    font-size: var(--sar-input-eye-font-size);
    color: var(--sar-input-eye-color);
    cursor: pointer;
  }

  @include e(count) {
    @include universal;
    align-items: flex-end;
    font-size: var(--sar-input-count-font-size);
    line-height: var(--sar-input-count-line-height);
    color: var(--sar-input-count-color);
  }

  @include m(disabled) {
    @include e(control) {
      color: var(--sar-disabled-color);
    }
  }

  @include m(readonly) {
    @include e(control) {
      pointer-events: none;
    }
  }

  // # 尺寸
  @include m(small) {
    padding: var(--sar-input-padding-y-sm) var(--sar-input-padding-x);

    @include e(control) {
      font-size: var(--sar-input-control-font-size-sm);
    }
  }

  @include m(large) {
    @include e(control) {
      font-size: var(--sar-input-control-font-size-lg);
    }
  }

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

    border-top-left-radius: var(
      --sar-popout-input-start-radius,
      var(--sar-input-border-radius)
    );
    border-bottom-left-radius: var(
      --sar-popout-input-start-radius,
      var(--sar-input-border-radius)
    );

    border-top-right-radius: var(
      --sar-popout-input-end-radius,
      var(--sar-input-border-radius)
    );
    border-bottom-right-radius: var(
      --sar-popout-input-end-radius,
      var(--sar-input-border-radius)
    );

    &:not(#{bem($b:input, $m: in-popout-input)}) {
      &:not(:first-child) {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        margin-left: -1px;
      }

      &:not(:last-child) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }
  }

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

/* #ifdef WEB */
@include bem(input) {
  @include b() {
    @include e(control) {
      :deep([type='password']::-ms-reveal) {
        display: none;
      }
    }
  }
}
/* #endif */