.number-input {
  position: relative;
  width: 100%;
  min-width: 80px;
  padding: 0 26px;
  box-sizing: border-box;
  border: 1px solid #8F96A2;
  border-radius: 16px;
}
.number-input__control {
  width: 14px;
  height: 14px;
  position: absolute;
  top: 50%;
  margin-top: -7px;
  box-sizing: border-box;
  mask-repeat: no-repeat;
  mask-position: center;
  background: #8F96A2;
}
@media (min-width: 769px) {
  .number-input__control:hover {
    cursor: pointer;
    background: #111111;
  }
}
.number-input__control_minus {
  left: 12px;
  mask-image: url("data:image/svg+xml,%3Csvg width='14' height='2' viewBox='0 0 14 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='14' height='2' fill='%23009645'/%3E%3C/svg%3E");
}
.number-input__control_plus {
  right: 12px;
  mask-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect y='6' width='14' height='2' fill='%23009645'/%3E%3Crect x='6' y='14' width='14' height='2' transform='rotate(-90 6 14)' fill='%23009645'/%3E%3C/svg%3E");
}
.number-input__value {
  width: 100%;
  box-sizing: border-box;
  border-radius: 0;
  border: 0;
  font-size: 18px;
  line-height: 22px;
  color: #000000;
  text-align: center;
  padding: 0 3px;
  height: 34px;
}
.number-input__value:focus {
  outline: none;
}