.custom-input-number {
  position: relative;
  display: inline-flex;
  border: 1px solid #B300B3;

  & input[type="number"] {
    font: inherit;
    border: none;
    outline: none;
  background: #000;
 color: #B300B3;
 }

  & input[type=number] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
  }

  & input[type=number]::-webkit-inner-spin-button,
  & input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
  }
}
.input-number-control {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  border-left: 1px solid #666;
  visibility: hidden;
  position: absolute;
  width: 20px;
  right: 0;
  bottom: 0;
  top: 0;

  & [data-action] {
    width: 100%;
    height: 50%;
    overflow: hidden;
    text-align: center;
    line-height: 1;
    background: #666;
    cursor: pointer;
    user-select: none;
    line-height: .75;
  }

  & [data-action]:hover {
    background: #B300B3;
  }

  & [data-action]:active {
    background: #666;
    color: #000;
  }

  & [data-action]:first-child {
    border-bottom: 1px solid #B300B3;
  }
}
.custom-input-number:hover .input-number-control {
  visibility: visible;
}

[type="number"].default {
  font: inherit;
color: #FFF;
}