@import './variables.scss';
@import "~@alifd/next/lib/core/index-noreset";
@import '~@alifd/next/lib/input/scss/variable';
@import '~@alifd/next/lib/input/scss/mixin';

//hover状态
#{$input-prefix} {
  &:not(.#{$css-prefix}disabled):not(.#{$css-prefix}focus):hover {
    box-shadow: $b-design-input-hover-shadow;
  }

  &.#{$css-prefix}focus {
    box-shadow: none;
  }
}

.#{$css-prefix}input-control .#{$css-prefix}input-len {
  vertical-align: middle;
}

#{$input-prefix}-group.#{$css-prefix}disabled {
  .#{$css-prefix}input-group-addon {
    border-color: $b-design-input-disabled-color;
  }
}

//theme=grey时样式

#{$input-prefix}.#{$css-prefix}grey {
  &:not(.#{$css-prefix}disabled) {
    border: $input-border-width solid $b-design-input-grey-bg-color;
    background-color: $b-design-input-grey-bg-color;
  }

  &.#{$css-prefix}focus {
    border: $input-border-width solid $input-focus-border-color;
  }

  // &.#{$css-prefix}disabled {
  //   border: $input-border-width solid $b-design-input-grey-bg-color;

  //   &:hover {
  //     background-color: $b-design-input-grey-bg-color;
  //   }
  // }

  &.#{$css-prefix}warning {
    border-color: $input-feedback-warning-border-color;
    background-color: $input-feedback-warning-bg-color;

    &.#{$css-prefix}focus,
    &:hover {
      border-color: $input-feedback-warning-border-color;
    }
  }

  &.#{$css-prefix}error {
    border-color: $input-feedback-error-border-color;
    background-color: $input-feedback-error-bg-color;

    &.#{$css-prefix}focus,
    &:hover {
      border-color: $input-feedback-error-border-color;
    }
  }
}

#{$input-prefix}-group.#{$css-prefix}grey {
  #{$input-prefix}-group-auto-width:not(.#{$css-prefix}disabled):not(.#{$css-prefix}error):not(.#{$css-prefix}warning) {
    border: $input-border-width solid $b-design-input-grey-bg-color;
    background-color: $b-design-input-grey-bg-color;

    &.#{$css-prefix}focus {
      border-color: $input-focus-border-color;
    }
  }

  #{$input-prefix}-group-text:not(.#{$css-prefix}disabled) {
    background-color: white;
    border-color: white;
  }
}




//textarea grey
#{$input-prefix}.#{$css-prefix}-grey {
  &#{$input-prefix}-textarea {
    border: $input-border-width solid $b-design-input-textarea-grey-bg-color;
  }

  textarea {
    background-color: $b-design-input-textarea-grey-bg-color;
  }
}

//group
#{$input-prefix}-group>.#{$css-prefix}input.#{$css-prefix}focus {
  z-index: 3;
}

//&-group-addon
#{$input-prefix} {
  &-group-addon {
    position: relative;

    &:first-child {
      &:after {
        content: '';
        width: 1px;
        height: 18px;
        background: #d9d9d9;
        position: absolute;
        right: -1px;
        top: 50%;
        margin-top: -9px;
      }
    }

    &:last-child {
      &:before {
        content: '';
        width: 1px;
        height: 18px;
        background: #d9d9d9;
        position: absolute;
        left: -1px;
        top: 50%;
        margin-top: -9px;
        z-index: 1;
      }
    }

    &:first-child:hover,
    &:last-child:hover {
      position: relative;
      z-index: 2;
    }
  }

  &-group-text {
    border: $input-border-width solid $input-addon-bg-color;
  }
}

//xs尺寸
#{$input-prefix} {
  &.#{$css-prefix}xs {
    @include input-size($b-design-form-element-xs-height, $input-s-padding, $form-element-small-font-size, $input-s-label-padding-left, $input-s-icon-padding-right);
    @include input-icon-size($form-element-small-icon-size);
    @include input-border-radius($form-element-small-corner);
  }

  &-group {
    >#{$input-prefix}:first-child {
      &.#{$css-prefix}xs {
        border-top-left-radius: $form-element-small-corner !important;
        border-bottom-left-radius: $form-element-small-corner !important;
      }
    }

    >#{$input-prefix}:last-child {
      &.#{$css-prefix}xs {
        border-top-right-radius: $form-element-small-corner !important;
        border-bottom-right-radius: $form-element-small-corner !important;
      }
    }
  }

  &-group-text {
    &.#{$css-prefix}xs {
      border-radius: $form-element-small-corner;
    }
  }
}


//select下的input

.#{$css-prefix}select,
.#{$css-prefix}time-picker2 {
  &.#{$css-prefix}grey {
    .#{$css-prefix}input:not(.#{$css-prefix}disabled) {
      border: $input-border-width solid $b-design-input-grey-bg-color;
      background-color: $b-design-input-grey-bg-color;

      &.#{$css-prefix}focus {
        border-color: $input-focus-border-color;
        box-shadow: none;
      }
    }
  }
}

.#{$css-prefix}date-picker2 {
  &.#{$css-prefix}grey {
    .#{$css-prefix}date-picker2-input:not(.#{$css-prefix}date-picker2-input-disabled) {
      background-color: $b-design-input-grey-bg-color;
    }

    .#{$css-prefix}date-picker2-input.#{$css-prefix}date-picker2-input-disabled {
      border-color: $color-fill1-2;
    }

    .#{$css-prefix}input:not(.#{$css-prefix}disabled) {
      background-color: $b-design-input-grey-bg-color;
    }
  }
}