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

//numberpick bg-white
#{$number-picker-prefix} {
  .#{$css-prefix}input-group-addon {

    &:last-child:before,
    &:first-child:after {
      display: none;
    }
  }



  &:not(#{$number-picker-prefix}-show-trigger) #{$number-picker-prefix}-handler {
    opacity: 1;
  }

  .#{$css-prefix}input.#{$css-prefix}disabled #{$number-picker-prefix}-handler {
    opacity: 1;
  }

  .#{$css-prefix}btn:not([disabled]) {
    .#{$css-prefix}icon {
      color: $b-design-btn-icon-color;
    }
  }

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

    }

    .#{$css-prefix}btn {
      display: block;
      background: transparent;

      &.#{$css-prefix}btn-normal {
        border-color: transparent;
      }

      &.disabled.#{$css-prefix}btn-normal,
      &[disabled].#{$css-prefix}btn-normal {
        background-color: transparent;

        &:hover {
          border-color: transparent;
        }
      }

      &:not([disabled]):hover {
        z-index: 1;
        border-color: $b-design-number-picker-btn-hover-bg-color;
        background-color: $b-design-number-picker-btn-hover-bg-color;
      }

      &:not([disabled]):active {
        z-index: 1;
        border-color: $b-design-number-picker-btn-border-color !important;
      }

      &:first-child {
        // border-right: initial;
        border-right: $b-design-number-picker-btn-width solid transparent;
        border-top: $b-design-number-picker-btn-width solid transparent;
        height: calc(50% + 1px);
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        top: -1px;
        position: relative;
        right: -1px;
      }

      &:last-child {
        border-right: $b-design-number-picker-btn-width solid transparent;
        border-bottom: $b-design-number-picker-btn-width solid transparent;
        height: calc(50% + 1px);
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-top-right-radius: 0;
        position: relative;
        right: -1px;
      }
    }

    .#{$css-prefix}input.#{$css-prefix}large {
      .#{$css-prefix}btn {
        &:first-child {
          .#{$css-prefix}icon {
            margin-top: 10px;
          }
        }

        &:last-child {
          .#{$css-prefix}icon {
            margin-top: -10px;
          }
        }
      }
    }

    .#{$css-prefix}input.#{$css-prefix}medium {
      .#{$css-prefix}btn {
        &:first-child {
          .#{$css-prefix}icon {
            margin-top: 6px;

            &::before {
              width: $b-design-btn-medium-icon-size;
              font-size: $b-design-btn-medium-icon-size;
            }
          }
        }

        &:last-child {
          .#{$css-prefix}icon {
            margin-top: -6px;

            &::before {
              width: $b-design-btn-medium-icon-size;
              font-size: $b-design-btn-medium-icon-size;
            }
          }
        }
      }
    }

    .#{$css-prefix}input.#{$css-prefix}small {
      .#{$css-prefix}btn {
        &:first-child {
          .#{$css-prefix}icon {
            margin-top: 4px;
          }
        }

        &:last-child {
          .#{$css-prefix}icon {
            margin-top: -4px;
          }
        }
      }
    }
  }

  &.#{$css-prefix}input-group-focus {
    .#{$css-prefix}btn {

      &:not([disabled]):first-child:hover {
        border-color: $b-design-number-picker-btn-border-color;
        border-left-color: transparent;
        border-bottom-color: transparent;
      }

      &:not([disabled]):last-child:hover {
        border-color: $b-design-number-picker-btn-border-color;
        border-left-color: transparent;
        border-top-color: transparent;
      }

      &:not([disabled]):active {
        z-index: 1;
        border-color: $b-design-number-picker-btn-border-color;
        border-left-color: transparent;
        border-top-color: transparent;
        border-bottom-color: transparent;
      }
    }
  }

  .#{$css-prefix}error {
    .#{$css-prefix}btn {

      &:not([disabled]):first-child:hover {
        border-color: $b-design-number-picker-btn-error-border-color;
        background-color: $b-design-number-picker-inline-btn-white-error-bg-hover-color;
        border-left-color: transparent;
        border-bottom-color: transparent;
      }

      &:not([disabled]):last-child:hover {
        border-color: $b-design-number-picker-btn-error-border-color;
        background-color: $b-design-number-picker-inline-btn-white-error-bg-hover-color;

        border-left-color: transparent;
        border-top-color: transparent;
      }

      &:not([disabled]):active {
        z-index: 1;
        border-color: $b-design-number-picker-btn-border-color;
        background-color: $b-design-number-picker-btn-hover-bg-color;
        border-left-color: transparent;
        border-top-color: transparent;
        border-bottom-color: transparent;
      }
    }
  }
}

//numberpick line

#{$number-picker-prefix} {
  &-inline {
    &:not(.#{$css-prefix}disabled):hover {
      .#{$css-prefix}input-group:not(.#{$css-prefix}input-group-focus) {
        border-radius: $s-1;
        box-shadow: $b-design-input-hover-shadow;
      }

    }

    .#{$css-prefix}input {
      border-left: none;
      border-right: none;
      width: calc(100% + 2px);
      position: relative;
      margin-left: -1px;

      &:not(.#{$css-prefix}disabled):hover {
        box-shadow: none;
      }
    }

    #{$input-prefix}-group-addon {
      .#{$css-prefix}btn.#{$css-prefix}btn-normal {
        background-color: $b-design-number-picker-inline-btn-white-bg-color;
        border-color: $b-design-number-picker-inline-btn-white-border-color;

        &:not(.disabled):hover {
          background-color: $b-design-number-picker-inline-btn-white-bg-hover-color;
          border-color: $b-design-number-picker-inline-btn-white-border-hover-color;
        }

        &:not(.disabled):active {
          border-color: $b-design-number-picker-inline-btn-white-border-active-color;
        }
      }

      &.#{$css-prefix}before {
        .#{$css-prefix}btn {
          background-color: $input-bg-color;
          position: relative;
          border-right-color: transparent;
          z-index: 3;
        }

        .#{$css-prefix}btn.disabled {
          background-color: $b-design-number-pickerinline--btn-disabled-bg-color !important;
          border-color: $b-design-number-pickerinline--btn-disabled-bg-color !important;
        }
      }

      &.#{$css-prefix}after {
        position: relative;
        margin-left: -1px;

        .#{$css-prefix}btn {
          border-left-color: transparent;
          background-color: $input-bg-color;
        }

        .#{$css-prefix}btn.disabled {
          background-color: $b-design-number-pickerinline--btn-disabled-bg-color !important;
          border-color: $b-design-number-pickerinline--btn-disabled-bg-color !important;
        }
      }
    }

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

      #{$input-prefix}-group-addon {
        .#{$css-prefix}btn.#{$css-prefix}btn-normal {
          border-color: $b-design-number-picker-inline-btn-white-border-active-color;

          &:not([disabled]):hover {
            background-color: $b-design-number-picker-inline-btn-white-bg-hover-color;
            border-color: $b-design-number-picker-inline-btn-white-border-active-color;
          }
        }

        &.#{$css-prefix}before {
          .#{$css-prefix}btn {
            position: relative;
            border-right-color: transparent !important;
            z-index: 3;
          }
        }

        &.#{$css-prefix}after {
          position: relative;
          margin-left: -1px;

          .#{$css-prefix}btn {
            border-left-color: transparent !important;
          }
        }
      }
    }

    &.#{$css-prefix}disabled {
      #{$input-prefix}-group-addon {
        .#{$css-prefix}btn.#{$css-prefix}btn-normal {
          background-color: $b-design-number-pickerinline--btn-disabled-bg-color !important;
          border-color: $b-design-number-pickerinline--btn-disabled-bg-color !important;
        }
      }
    }

    &.#{$css-prefix}number-picker-error {
      .#{$css-prefix}input-group-addon {
        .#{$css-prefix}btn.#{$css-prefix}btn-normal {
          background-color: $b-design-number-picker-inline-btn-white-bg-error-color;
          border-color: $b-design-number-picker-inline-btn-white-error-border-color;
        }

        &:first-child {
          .#{$css-prefix}btn.#{$css-prefix}btn-normal {
            border-right-color: transparent;

            &:not([disabled]):hover {
              background-color: $b-design-number-picker-inline-btn-white-error-bg-hover-color;
              border-color: $b-design-number-picker-inline-btn-white-error-border-color;
              border-right-color: transparent;
            }

            &:not([disabled]):active {
              background-color: $b-design-number-picker-inline-btn-white-bg-hover-color;
              border-color: $b-design-number-picker-inline-btn-white-border-active-color;
            }
          }

        }

        &:last-child {
          .#{$css-prefix}btn.#{$css-prefix}btn-normal {
            border-left-color: transparent;

            &:not([disabled]):hover {
              background-color: $b-design-number-picker-inline-btn-white-error-bg-hover-color;
              border-color: $b-design-number-picker-inline-btn-white-error-border-color;
              border-left-color: transparent;
            }

            &:not([disabled]):active {
              background-color: $b-design-number-picker-inline-btn-white-bg-hover-color;
              border-color: $b-design-number-picker-inline-btn-white-border-active-color;
            }
          }

        }

      }

      // .#{$css-prefix}input.#{$css-prefix}error {
      //   border-left-color: transparent !important;
      //   border-right-color: transparent !important;
      // }
    }

    &.#{$css-prefix}medium {
      .#{$css-prefix}btn {
        .#{$css-prefix}icon {
          &::before {
            width: $b-design-btn-medium-icon-size;
            font-size: $b-design-btn-medium-icon-size;
          }
        }
      }
    }
  }
}

//numberpicker bg-grey
#{$number-picker-prefix}.#{$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: $input-border-width solid $input-focus-border-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;
      }
    }
  }

  &#{$number-picker-prefix}-normal {
    .#{$css-prefix}btn {
      &:not([disabled]):hover {
        background-color: $b-design-number-picker-btn-grey-hover-bg-color;
        border-color: $b-design-number-picker-btn-grey-hover-bg-color;
      }
    }
  }

  &.#{$css-prefix}input-group-focus {
    .#{$css-prefix}btn {

      &:not([disabled]):first-child:hover {
        border-color: $b-design-number-picker-btn-border-color;
        border-left-color: transparent;
        border-bottom-color: transparent;
      }

      &:not([disabled]):last-child:hover {
        border-color: $b-design-number-picker-btn-border-color;
        border-left-color: transparent;
        border-top-color: transparent;
      }

      &:not([disabled]):active {
        z-index: 1;
        border-color: $b-design-number-picker-btn-border-color;
        border-left-color: transparent;
        border-top-color: transparent;
        border-bottom-color: transparent;
      }
    }
  }

  .#{$css-prefix}error {
    .#{$css-prefix}btn {

      &:not([disabled]):first-child:hover {
        border-color: $b-design-number-picker-btn-error-border-color;
        background-color: $b-design-number-picker-inline-btn-white-error-bg-hover-color;
        border-left-color: transparent;
        border-bottom-color: transparent;
      }

      &:not([disabled]):last-child:hover {
        border-color: $b-design-number-picker-btn-error-border-color;
        background-color: $b-design-number-picker-inline-btn-white-error-bg-hover-color;

        border-left-color: transparent;
        border-top-color: transparent;
      }

      &:not([disabled]):active {
        z-index: 1;
        border-color: $b-design-number-picker-btn-border-color;
        background-color: $b-design-number-picker-btn-grey-hover-bg-color !important;
        border-left-color: transparent;
        border-top-color: transparent;
        border-bottom-color: transparent;
      }
    }
  }

  &#{$number-picker-prefix}-inline {
    #{$input-prefix}-group-addon {
      .#{$css-prefix}btn.#{$css-prefix}btn-normal {
        background-color: white;
        border-color: white;

        &:not(.disabled):hover {
          background-color: $b-design-number-picker-btn-grey-hover-bg-color;
          border-color: $b-design-number-picker-btn-grey-hover-bg-color;
        }

        &:not(.disabled):active {
          border-color: $b-design-number-picker-inline-btn-white-border-active-color;
        }
      }

      &.#{$css-prefix}before {
        .#{$css-prefix}btn {
          background-color: white;

        }
      }

      &.#{$css-prefix}after {
        .#{$css-prefix}btn {
          border-left-color: transparent;
          background-color: white;
        }
      }
    }



    .#{$css-prefix}input-group-focus {
      #{$input-prefix}-group-addon {
        .#{$css-prefix}btn.#{$css-prefix}btn-normal {
          border-color: $b-design-number-picker-inline-btn-white-border-active-color;

          &:not([disabled]):hover {
            background-color: $b-design-number-picker-btn-grey-hover-bg-color;
            border-color: $b-design-number-picker-inline-btn-white-border-active-color;
          }
        }
      }

      .#{$css-prefix}input.#{$css-prefix}focus {
        border-right-color: transparent !important;
        border-left-color: transparent !important;
      }
    }

    &.#{$css-prefix}number-picker-error {
      .#{$css-prefix}input-group-addon {
        .#{$css-prefix}btn.#{$css-prefix}btn-normal {
          background-color: $b-design-number-picker-inline-btn-white-bg-error-color;
          border-color: $b-design-number-picker-inline-btn-white-error-border-color;
        }

        &:first-child {
          .#{$css-prefix}btn.#{$css-prefix}btn-normal {
            border-right-color: transparent;

            &:not([disabled]):hover {
              background-color: $b-design-number-picker-inline-btn-white-error-bg-hover-color;
              border-color: $b-design-number-picker-inline-btn-white-error-border-color;
              border-right-color: transparent;
            }

            &:not([disabled]):active {
              background-color: $b-design-number-picker-inline-btn-white-bg-hover-color;
              border-color: $b-design-number-picker-inline-btn-white-border-active-color;
            }
          }

        }

        &:last-child {
          .#{$css-prefix}btn.#{$css-prefix}btn-normal {
            border-left-color: transparent;

            &:not([disabled]):hover {
              background-color: $b-design-number-picker-inline-btn-white-error-bg-hover-color;
              border-color: $b-design-number-picker-inline-btn-white-error-border-color;
              border-left-color: transparent;
            }

            &:not([disabled]):active {
              background-color: $b-design-number-picker-btn-grey-hover-bg-color;
              border-color: $b-design-number-picker-inline-btn-white-border-active-color;
            }
          }

        }

      }
    }
  }


}