@import '../../style/theme/index.less';

.cyber-input-number.ant-input-group-wrapper {
  &.default {
    .ant-input-group-addon {
      padding: 0;
      .cyber-input-addon-before,
      .cyber-input-addon-after {
        display: table-cell;
        padding: 5.6px 11px;
        background-color: #FFFFFF;
        transition: all 0.2s linear;
        border-radius: @border-radius-base;
        &:hover {
          background-color: #f8fbff;
        }
        &:active {
          background-color: #e5e8ec;
        }
        &.disabled {
          background-color: #FAFAFA;
          cursor: not-allowed;
          .g-icon {
            color: rgba(0, 0, 0, 0.25);
          }
        }
      }
    }
  }
  &.wrap {
    .ant-input-group-addon:last-child {
      padding: 0;
      .cyber-input-number-control {
        display: flex;
        flex-direction: column;
        justify-content: center;
        background: #FFFFFF;
        line-height: 1;
        border-radius: 0;
        border-right: 1px solid @border-color-base;
        .cyber-input-number-up,
        .cyber-input-number-down {
          padding: 0px 6px;
          height: 50%;
          cursor: pointer;
          &:hover {
            background-color: #f8fbff;
          }
          &:active {
            background-color: #e5e8ec;
          }
          &.disabled {
            background-color: #FAFAFA;
            cursor: not-allowed;
            .g-icon {
              color: rgba(0, 0, 0, 0.25);
            }
          }
        }
        .cyber-input-number-up {
          position: relative;
          transform: rotateX(180deg);
          border-top: 1px solid @border-color-base;
        }
        &:last-child {
          border-radius: 0 @border-radius-base @border-radius-base 0;
          border-right: 0;
        }
      }
      .cyber-input-addon-after {
        display: table-cell;
        padding: 5.6px 11px;
        background-color: #FAFAFA;
        transition: all 0.2s linear;
        border-radius: @border-radius-base;
      }
    }
    .cyber-input-group-addon {
      display: flex;
    }
  }
  input {
    font-family: @oswald;
  }
}