$name: 'ivue-input-number';

:root {
  --#{$name}-font-size: 14px;
  --#{$name}-width: 80px;
  --#{$name}-height: 32px;
  --#{$name}-radius: 4px;

  // internal
  --#{$name}-internal-width: 22px;

  // input
  --#{$name}-input-padding: 0 7px;

  // controls-outside
  --#{$name}-controls-outside-width: 144px;
  --#{$name}-controls-outside-padding: 0 32px;

  // outside
  --#{$name}-outside-width: 32px;

  // color
  --#{$name}-shadow: 0 0 0 2px rgba(91, 142, 255, 0.2);
  --#{$name}-outside-color: #f8f8f9;
  --#{$name}-disabled-bg: #f8f9fd;
}

.#{$name} {
  position: relative;
  display: inline-block;
  font-size: var(--#{$name}-font-size);
  color: var(--ivue-text-color);
  background-color: var(--ivue-white-color);
  transition: border var(--ivue-default-transition-time) var(--ivue-ease-in-out),
    background var(--ivue-default-transition-time) var(--ivue-ease-in-out),
    box-shadow var(--ivue-default-transition-time) var(--ivue-ease-in-out);
  width: var(--#{$name}-width);
  height: var(--#{$name}-height);
  line-height: var(--#{$name}-height);
  vertical-align: middle;
  border: 1px solid var(--ivue-border-color);
  border-radius: var(--#{$name}-radius);
  overflow: hidden;

  &:hover {
    border-color: var(--ivue-primary-color);

    .#{$name}-internal--wrapper {
      opacity: 1;
    }
  }

  &:focus {
    outline: 0;
    border-color: var(--ivue-primary-color);
    box-shadow: var(--#{$name}-shadow);
  }

  // 获取焦点
  &-focused {
    border-color: var(--ivue-primary-color);
    box-shadow: var(--#{$name}-shadow);
  }

  // 输入框
  &-input {
    width: 100%;
    height: 100%;
    padding: var(--#{$name}-input-padding);
    text-align: left;
    outline: 0;
    border: 0;
    border-radius: var(--#{$name}-radius);
    color: var(--ivue-title-color);
    transition: all var(--ivue-default-transition-time) linear;

    &--wrapper {
      display: flex;
      align-items: center;
      overflow: hidden;
      height: 100%;
    }
  }

  // 上下按钮
  &-internal {
    flex: 1;
    min-width: auto;
    width: 100%;
    height: auto;
    padding: 0;
    border-radius: 0;
    cursor: pointer;
    color: var(--ivue-legend-color);

    &:hover {
      color: var(--ivue-primary-color);
    }

    .ivue-icon {
      width: auto;
      min-width: auto;
      height: auto;
      font-size: var(--#{$name}-font-size);
      transition: color var(--ivue-default-transition-time)
        var(--ivue-ease-in-out);
    }

    // 外层
    &--wrapper {
      position: absolute;
      top: 0;
      right: 0;
      width: var(--#{$name}-internal-width);
      height: 100%;
      display: flex;
      flex-direction: column;
      border-left: 1px solid var(--ivue-border-color);
      background: var(--ivue-white-color);
      opacity: 0;
      transition: opacity var(--ivue-default-transition-time)
        var(--ivue-ease-in-out);

      &::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1px;
        margin: auto;
        background: var(--ivue-border-color);
      }
    }
  }

  // 禁用
  .#{$name}-internal--disabled {
    cursor: var(--ivue-cursor-disabled);
    color: var(--ivue-disabled-color) !important;
    pointer-events: auto;
  }

  // 禁用
  &-disabled {
    &:hover {
      border-color: var(--ivue-border-color);

      .#{$name}-internal--wrapper {
        display: none;
      }
    }

    .#{$name}-input {
      opacity: 0.8;
      background-color: var(--#{$name}-disabled-bg);
      cursor: var(--ivue-cursor-disabled);
      color: var(--ivue-disabled-color);
    }

    .#{$name}-outside {
      .ivue-button-content {
        color: var(--ivue-disabled-color);
      }
    }
  }

  // 按钮位置是否置于两侧
  &-controls-outside {
    width: var(--#{$name}-controls-outside-width);
    padding: var(--#{$name}-controls-outside-padding);
  }

  // 外部按钮
  &-outside {
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--#{$name}-outside-width);
    height: auto;
    background-color: var(--#{$name}-outside-color);
    color: var(--ivue-text-color);
    min-width: auto;
    padding: 0;
    border-radius: 0;
    cursor: pointer;
    color: var(--ivue-legend-color);

    &:hover {
      color: var(--ivue-primary-color);
    }

    .ivue-icon {
      width: auto;
      min-width: auto;
      height: auto;
      font-size: var(--#{$name}-font-size);
      transition: color var(--ivue-default-transition-time)
        var(--ivue-ease-in-out);
    }

    &--up {
      right: 0;
      border-left: 1px solid var(--ivue-border-color);
    }

    &--down {
      left: 0;
      border-right: 1px solid var(--ivue-border-color);
    }
  }
}