@import url(../var.less);

@input-number-prefix: ~"@{prefix}input-number";

.@{input-number-prefix}{
  position: relative;
  display: inline-block;
  width: 140px;
  line-height: @input-height - 2;
  

  &:hover {
    .w-input-number__increase, .w-input-number__decrease {
      opacity: 1;
    }
  }

  .w-input {
    display: block;

    &__inner {
      -webkit-appearance: none;
      padding-left: @input-number-crease-width + 10;
      padding-right: @input-number-crease-width + 10;
    }
  }

  &__increase, &__decrease {
    position: absolute;
    z-index: 1;
    top: 1px;
    width: @input-number-crease-width;
    height: auto;
    text-align: center;
    color: @regular-text-color;
    cursor: pointer;
    font-size: @font-size-base;
    opacity: 0;
    transition: opacity .24s linear .1s;

    &:hover {
      color: @primary-color;

      &:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled) {
        border-color: @input-focus-border;
      }
    }

    &.is-disabled {
      color: @disabled-border-color;
      cursor: not-allowed;
    }
  }

  &__increase {
    right: 1px;
    border-radius: 0 @border-radius-base @border-radius-base 0;
    border-left: @border-base;
  }

  &__decrease {
    left: 1px;
    border-radius: @border-radius-base 0 0 @border-radius-base;
    border-right: @border-base;
  }

  &.is-disabled {
    .w-input-number__increase, .w-input-number__decrease {
      border-color: @disabled-border-color;
      color: @disabled-border-color;

      &:hover {
        color: @disabled-border-color;
        cursor: not-allowed;
      }
    }
  }

  &.is-without-controls {
    .w-input__inner {
      padding-left: 15px;
      padding-right: 15px;
    }
  }

  &--medium {
    width: 140px;
    line-height: @input-medium-height - 2;

    .w-input-number__increase, .w-input-number__decrease {
      width: @input-medium-height;
      font-size: @input-medium-font-size;
    }

    .w-input__inner {
      padding-left: @input-medium-height + 7;
      padding-right: @input-medium-height + 7;
    }
  }
  
  &--small {
    width: 140px;
    line-height: @input-small-height - 2;

    .w-input-number__increase, .w-input-number__decrease {
      width: @input-small-height;
      font-size: @input-small-font-size;

      [class*=w-icon] {
        transform: scale(.9);
      }
    }

    .w-input__inner {
      padding-left: @input-small-height + 7;
      padding-right: @input-small-height + 7;
    }
  }

  &.is-controls-both-sides {
    .w-input-number__increase, .w-input-number__decrease {
      opacity: 1;
    }

    .w-input__inner {
      text-align: center;
    }

    .w-input-number__increase, .w-input-number__decrease {
      width: @input-height;
      background-color: @background-color-base;
    }

    &[class*=medium] {
      [class*=increase], [class*=decrease] {
        width: @input-medium-height;
      }
    }

    &[class*=small] {
      [class*=increase], [class*=decrease] {
        width: @input-small-height;
      }
    }
  }

  &.is-controls-right {
    .w-input__inner {
      padding-left: 15px;
      padding-right: @input-number-crease-width + 10;
    }

    .w-input-number__increase, .w-input-number__decrease {
      height: auto;
      line-height: (@input-height - 2) / 2;

      [class*=w-icon] {
        transform: scale(.8);
      }
    }

    .w-input-number__increase {
      border-radius: 0 @border-radius-base 0 0;
      border-bottom: @border-base;
    }

    .w-input-number__decrease {
      right: 1px;
      bottom: 1px;
      top: auto;
      left: auto;
      border-right: none;
      border-left: @border-base;
      border-radius: 0 0 @border-radius-base 0;
    }

    &[class*=medium] {
      [class*=increase], [class*=decrease] {
        line-height: (@input-medium-height - 2) / 2;
        height: (@input-medium-height - 2) / 2 + 1;
      }
    }

    &[class*=small] {
      [class*=increase], [class*=decrease] {
        height: (@input-small-height - 2) / 2 + 0.5;
        line-height: (@input-small-height - 2) / 2;
      }
    }
  }
  
  &.is-no-bordered {
    .w-input__inner {
      border-color: transparent;
    }

    [class*=increase], [class*=decrease] {
      border-color: transparent;
      background-color: transparent;
    }
  }
}