@import '../../style/variables';
@import '../../input/style/mixin';

.#{$prefix}input-number {
  position: relative;
  box-sizing: border-box;

  &:hover {
    .#{$prefix}input-number__controls {
      opacity: 1;
    }
  }

  &__input {
    @include input-default();
    padding-left: 7px;
    padding-right: 25px;
    &::-webkit-inner-spin-button,
    &::-webkit-outer-spin-button {
      -webkit-appearance: none;
    }
  }

  &__controls {
    box-sizing: border-box;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1px;
    opacity: 0;
    transition: all 300ms;
  }

  &__up,
  &__down {
    cursor: pointer;
    box-sizing: border-box;
    flex: 1;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0 7px;
    border-left: 1px solid #d9d9d9;
    transition: all 300ms;

    &:hover {
      flex: 2;

      .ty-icon {
        color: $primary-color !important;
      }
    }

    &:active {
      background-color: #f4f4f4;
    }
  }

  &__up {
    border-bottom: 1px solid #d9d9d9;
  }

  &__down {
    padding-top: 1px;
  }

  &_sm {
    .#{$prefix}input-number {
      &__input {
        font-size: $input-sm-font-size;
        height: $input-sm-height;
        line-height: $input-sm-height;
      }
    }
  }

  &_md {
    .#{$prefix}input-number {
      &__input {
        font-size: $input-md-font-size;
        height: $input-md-height;
        line-height: $input-md-height;
      }
    }
  }

  &_lg {
    .#{$prefix}input-number {
      &__input {
        font-size: $input-lg-font-size;
        height: $input-lg-height;
        line-height: $input-lg-height;
      }
    }
  }

  &_disabled {
    .#{$prefix}input-number {
      &__input {
        @include input-default-disabled();
      }

      &__up,
      &__down {
        cursor: not-allowed;

        .ty-icon {
          color: #999 !important;
        }

        &:hover {
          flex: 1;
        }

        &:active {
          background-color: transparent;
        }
      }
    }
  }

  &_always-controls {
    .#{$prefix}input-number__controls {
      opacity: 1;
    }
  }
}