// @import '../_utils.scss';
// @import './icon.scss';
// @import './inputNumber.scss';

.#{$typefield-prefix-cls} {
  $radius-wrap: 0 $btn-border-radius $btn-border-radius 0;
  // display: block;
  display: inline-block;
  position: relative;
  @if $--size-switch != yes {
    height: $form-component-height;
    line-height: $form-component-height;
  }
  width: 100%;
  vertical-align: middle;
  input {
    width: 100%;
    @if $--size-switch == yes {
      font-size: computed-font-size();
      @include computed-height();
    } @else {
      height: $form-component-height;
      line-height: $form-component-height;
      font-size: $typefield-input-font-size;
      padding-left: $typefield-input-padding-left;
      padding-right: $typefield-input-padding-right;
    }
    outline: 0;
    // line-height: 1.42857143;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: border-color ease-in-out $transition-time, -webkit-box-shadow ease-in-out $transition-time;
    -o-transition: border-color ease-in-out $transition-time, box-shadow ease-in-out $transition-time;
    transition: border-color ease-in-out $transition-time, box-shadow ease-in-out $transition-time;
    color: $typefield-input-color;
    background-color: $typefield-input-background-color;
    background-image: none;
    border: 1px solid $border-color-base;
    border-radius: $typefield-tip-border-radius;
    vertical-align: top;

    @include theme-font-color($__typefield_font-color);
    @include theme-background-color($__typefield_background-color);
    @include theme-border-color($__typefield_border-color);
    @include structure-font-size($__typefield-default_font-size,0);
    @include placeholder();

    &:hover {
      @include hover();
    }
  }

  input[disabled]:focus,
  input[readonly]:focus {
    box-shadow: none;
    -webkit-box-shadow: none;
    border: 1px solid $border-color-base;

    @include theme-border-color($__typefield_disabled_border-color);
    @include theme-box-shadow($__typefield_disabled_box-shadow);
  }

  input:focus {
    outline: 0;
    border-color: $typefield-input-focus-border-color;

    @include theme-border-color($__typefield_focus_border-color);
    @include theme-box-shadow($__typefield_focus_box-shadow);
  }

  &-large{
    @include input-large();
   input{
    @include input-large();
   }
   padding-top: 0;
   padding-bottom: 0;
  }
  &-large &-group-append, &-large &-group-prepend {
    @if $--size-switch == yes {
      @include computed-height($--size-height-base + 4)
    }
  }
  &-small{
    @include input-small();
    input{
      @include input-small();
    }
  }
  &-small &-group-append, &-small &-group-prepend {
    @if $--size-switch == yes {
      @include computed-height($--size-height-base - 4)
    }
  }

  &-disabled {
    input[disabled] {
      @include disabled();
    }
    .#{$typefield-prefix-cls}-input {
      opacity: $typefield-disabled-opacity;
      cursor: $cursor-disabled;
      background-color: $input-disabled-bg;

      @include theme-background-color($__typefield_disabled_background-color);
    }
    .#{$typefield-prefix-cls}-handler-wrap {
      display: none;
    }
    .#{$typefield-prefix-cls}-handler {
      @include handler-disabled();
    }
  }

  &-readonly {
    input[readonly] {
      // background: $input-readonly-bg;
      @include readonly();
    }
  }

  &-tip {
    position: absolute;
    display: block;
    font-family: $typefield-tip-font-family;
    text-align: left;
    line-height: $typefield-tip-line-height;
    top: $typefield-tip-top;
    left: $typefield-tip-left;
    padding: $typefield-tip-padding;
    z-index: $zindex-tooltip;
    font-size: $typefield-tip-font-size;
    border-radius: $typefield-tip-border-radius;
    border: $typefield-tip-border;
    background: $typefield-tip-background;
    color: $typefield-tip-color;
    box-shadow: $typefield-tip-color-box-shadow;

    @include theme-border-color($__typefield-tip_border-color);
    @include theme-font-color($__typefield-tip_font-color);
    @include theme-background-color($__typefield-tip_background-color);
    @include theme-box-shadow($__typefield-tip_box-shadow);
    @include structure-font-size($__typefield-default_font-size,0);

    &-keep {
      z-index: 1;
    }
    &-transfer.#{$typefield-prefix-cls}-tip {
      z-index: 1001;
    }
    &-top {
      top: initial!important;
      bottom: 32px!important;
    }
  }

  &-left {
    text-align: left;
  }

  &-center {
    text-align: center;
  }

  &-right {
    text-align: right;
  }

  &-handler-wrap {
    font-size: inherit;
    font-weight: normal;
    line-height: 1;
    color: rgb(73, 80, 96);
    text-align: center;
    border-width: 1px 1px 1px 0;
    border-style: solid;
    border-color: rgb(215, 221, 228);
    border-image: initial;
    border-radius: 0 4px 4px 0;
    width: 1px;
    white-space: nowrap;
    vertical-align: middle;
    display: table-cell;
    word-spacing: -1em;
    background-color: #eee;
    overflow: hidden;

    @include theme-border($__typefield-handler_border);
    @include theme-border-left($__typefield-handler_border-left);
    @include theme-font-color($__typefield-handler_font-color);
    @include theme-background-color($__typefield-handler_background-color);
  }

  .no-border-radius {
    border-bottom-right-radius: 0 !important;
    border-top-right-radius: 0 !important;
  }

  &-handler-append {
    border: 1px solid $border-color-base;
    border-radius: $radius-wrap;

    @include theme-border-color($__typefield-handler-append-arrow_border-color);
  }

  &-handler-arrow {
    border: 1px solid $border-color-base;

    @include theme-border-color($__typefield-handler-arrow_border-color);
  }

  &-arrow-wrap {
    width: $inputnumber-arrow-wrap-width;
    // float: left;
    display: table-cell;
    vertical-align: middle;
    background-color: #fff;

    @include theme-background-color($__typefield-arrow-wrap_background-color);
  }

  &-handler-up {
    width: $inputnumber-arrow-wrap-width;
    cursor: pointer;

    &-inner {
      top: $inputnumber-handler-up-inner-top;
    }
  }

  &-handler-down {
    width: $inputnumber-arrow-wrap-width;
    border-top: 1px solid $border-color-base;
    top: $inputnumber-handler-down-top;
    cursor: pointer;

    @include theme-border-color($__typefield-handler-down_border-color);
  }

  &-handler {
    display: block;
    // width: 100%;
    @if $--size-switch == yes {
      height: ($--size-height-base - 2) / 2;
    } @else {
      height: ($input-height-base - 2) / 2;
    }
    line-height: 0;
    text-align: center;
    overflow: hidden;
    color: $inputnumber-handler-color;
    position: relative;

    @include theme-font-color($__typefield-handler_font-color);

    &:hover &-up-inner,
    &:hover &-down-inner {
      color: lighten($primary-color, 20%);

      @include theme-font-color($__typefield-handler-up-down_hover_font-color);
    }

    &:active {
      @include theme-background-color($__typefield-handler_active_background-color);
      .#{$typefield-prefix-cls}-handler {
        &-up-inner, &-down-inner {
          @include theme-font-color($__typefield-handler_active_font-color);
        }
      }
    }
  }

  &-handler-up-inner,
  &-handler-down-inner {
    width: $inputnumber-handler-down-inner-width;
    height: $inputnumber-handler-down-inner-height;
    line-height: $inputnumber-handler-down-inner-line-height;
    font-size: $font-size-base;
    color: $inputnumber-handler-down-inner-color;
    user-select: none;
    position: absolute;
    right: $inputnumber-handler-down-inner-right;
    transition: all $transition-time linear;

    @include theme-font-color($__typefield-handler-up-down_font-color);
  }

  &-append {
    display: table-cell;
    // float: left;
    padding: 4px 8px;
    font-size: inherit;
    font-weight: normal;
    line-height: 1;
    color: #495060;
    text-align: center;
    background-color: #eee;
    vertical-align: middle;

    @include theme-font-color($__typefield-append_font-color);
    @include theme-background-color($__typefield-append_background-color);

    .#{$select-prefix-cls} {
      margin: -5px -8px;
    }

    .#{$select-prefix-cls}-selection {
      background-color: inherit;
      margin: -1px;
      border: 1px solid transparent;
      border-color: transparent;
    }
  }

  &-handler-down-disabled,
  &-handler-up-disabled,
  &-disabled {
    .#{$typefield-prefix-cls}-handler-down-inner,
    .#{$typefield-prefix-cls}-handler-up-inner {
      @include handler-disabled();
    }
  }

  &-handler-large {
    .#{$typefield-prefix-cls}-handler-down,
    .#{$typefield-prefix-cls}-handler-up, 
    .#{$typefield-prefix-cls}-handler-up-inner, 
    .#{$typefield-prefix-cls}-handler-down-inner {
      @if $--size-switch == yes {
        @include computed-typefield-line-height(large)
      } @else {
        height: $typefield-handle-large-line-height;
        line-height: $typefield-handle-large-line-height;
      }
    }
  }

  &-handler-small {
    .#{$typefield-prefix-cls}-handler-down,
    .#{$typefield-prefix-cls}-handler-up,
    .#{$typefield-prefix-cls}-handler-up-inner, 
    .#{$typefield-prefix-cls}-handler-down-inner {
      @if $--size-switch == yes { 
        @include computed-typefield-line-height(small)
      } @else {
        height: 11px;
        line-height: 11px;
      }
    }
  }
}
// 需求217741 需求206493导致的问题 所以将代码注释回退
// .#{$typefield-prefix-cls}-transfer {
//     display: block;
//     // display: inline-block;
//     position: static;
//     height: $form-component-height;
//     line-height: $form-component-height;
//     width: auto;
//     vertical-align: middle;
// }

.#{$typefield-prefix-cls}-group {
  @include input-group("#{$typefield-prefix-cls}");

  &-prepend,
  &-append {
    @if $--size-switch == yes {
      // 全局配置情况下，有上下padding，计算不好对齐，在原来的计算情况下-2
      padding: max(($--size-height-base - $--size-line-height-base) / 2 - 1, 0) - 2 $--size-offset-base;
    }
    .#{$css-prefix}btn {
      @include theme-font-color($__typefield-pend_font-color);
    }
  }

  input {
    border-radius: 0;
  }

  .#{$typefield-prefix-cls}-left {
    border-radius: $border-radius-small 4px 4px $border-radius-small;
  }

  .#{$typefield-prefix-cls}-right {
    // border-bottom-left-radius: 4px; 
    // border-top-left-radius: 4px;
    // border-bottom-right-radius: $border-radius-small;
    // border-top-right-radius: $border-radius-small;
    border-radius: 4px $border-radius-small $border-radius-small 4px;
  }

  .#{$typefield-prefix-cls}-no-radius {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
  }

  .#{$typefield-prefix-cls}-no-right-radius {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
  }

  .#{$select-prefix-cls}-selection {
    margin: $typefield-h-select-selection-margin;
    border-bottom-left-radius: $typefield-h-select-selection-border-bottom-left-radius $typefield-h-select-selection-border-bottom-left-radius;
    border-top-left-radius: $typefield-h-select-selection-border-top-left-radius;
  }
}

.#{$form-item-prefix-cls}-error {
  .#{$typefield-prefix-cls} {
    input {
      border: 1px solid $error-color;

      @include theme-border-color($__typefield-form-item_error_border-color);

      &:focus {
        @include theme-box-shadow($__typefield-form-item_error_box-shadow);
      }
      &:hover {
        @include theme-border-color($__typefield-form-item_error-hover_border-color);
      }
    }
  }
  .#{$typefield-prefix-cls}-group {
    @include input-group-error();
  }
  .#{$typefield-prefix-cls}-handler-wrap {
    border-color: $error-color;

    @include theme-border-color($__typefield-form-item-handler_error_border-color);
  }
  .#{$transfer-prefix-cls} {
    .#{$typefield-prefix-cls} {
      @include input();

      &-icon {
        color: $icon-color;

        @include theme-font-color($__typefield-form-item-transfer-icon_error_font-color);
      }
    }
  }
}

.#{$form-item-prefix-cls}-changed {
  .#{$typefield-prefix-cls} {
    input {
      color: $changed-color;

      @include theme-font-color($__typefield-form-item_changed_font-color);
    }
  }
}

.#{$editgird-prefix-cls}-cell-error {
  .#{$typefield-prefix-cls} {
    input {
      border: 1px solid $error-color;

      @include theme-border-color($__typefield-editgrid-cell_error_border-color);
    }
  }
  .#{$input-prefix-cls}-group {
    @include input-group-error();
  }
}
.#{$input-prefix-cls}-group-append {
  //  border: 0!important;
  //  border-radius:0;
  //  -webkit-border-radius:0;
  //  -moz-border-radius:0;
  //  -ms-border-radius:0;
  //  -o-border-radius:0;
}