.cm-spinner {
    border-radius: var(--cui-border-radius-small);
    height: var(--height-control-default);
    position: relative;
    display: inline-block;
    width: 100px;
  
    .cm-input-group-append {
      width: 24px;
      opacity: 0;
      transition: all 200ms linear;
    }
    &:hover {
      .cm-input-group-append {
        opacity: 1;
      }
    }
    span {
      display: block;
    }
    .cm-spinner-plus,
    .cm-spinner-subs {
      position: absolute;
      height: 50%;
      width: 24px;
      background-color: var(--cui-color-bg-2);
      font-size: 13px;
      text-align: center;
      cursor: pointer;
      border-left: 1px solid rgba(0,0,0,0.1);
      &:hover{
        color: var(--cui-primary-color);
      }
    }
    .cm-spinner-plus {
      border-bottom: 1px solid rgba(0,0,0,0.1);
    }
    .cm-spinner-plus{
      border-top-right-radius: 3px;
      svg {
        top: 55%;
      }
    }
    .cm-spinner-subs {
      border-top: 0;
      border-bottom-right-radius: 3px;
    }
    .cm-icon {
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    .cm-spinner-plus {
      top: 0;
      right: 0;
    }
    .cm-spinner-subs {
      bottom: 0;
      right: 0;
    }
    .cm-spinner-value {
      width: 100%;
      height: 100%;
      line-height: normal;
      .cm-input{
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
      }
    }
  
    &.cm-spinner-small{
      height: var(--height-control-small);
    }
    &.cm-spinner-large{
      height: var(--height-control-large);
    }
}
.cm-spinner-disabled {
  opacity: 1;
  cursor: not-allowed;
  color: var(--cui-color-disabled-text);
  &:hover {
    .cm-input-group-append {
      opacity: 0;
    }
  }
  .cm-spinner-plus,
  .cm-spinner-subs {
    cursor: not-allowed;
  }
}