.numberbox,
.numberbox.m {
  width: 150px;
  height: 26px;
}
.numberbox.xl {
  width: 170px;
  height: 40px;
  .numberbox-button {
    width: 40px;
  }
}
.numberbox.l {
  width: 150px;
  height: 32px;
  .numberbox-button {
    width: 32px;
  }
}
.numberbox.s {
  width: 80px;
  height: 22px;
  .numberbox-button {
    width: 22px;
  }
  .numberbox-input {
    font-size: 12px;
  }
}

.numberbox-input,
.numberbox-button {
  height: 100%;
}
.numberbox-button {
  line-height: 100%;
}

.numberbox {
  .inline-flex;
  position: relative;
  overflow: hidden;
  text-align: center;
  vertical-align: middle;
  background-color: white;
  border-radius: 4px;
  &:extend(.flex-middle);
  &:extend(.bordered);
}

// 文本框
.numberbox-input-wrapper {
  &:extend(.flex-1);
  .numberbox-input {
    display: block;
    width: 100%;
    padding: 0;
    text-align: center;
    text-overflow: ellipsis;
    border-radius: 0;
    &:extend(.appearance);
    &:extend(.flex-1);
  }
}

// 按钮
.numberbox-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 26px;

  font-size: 14px;
  background-color: white;
  border-width: 0;
}

.numberbox-button-minus {
  left: 0;
  color: var(--primary);
  border-right: 1px solid var(--border);
  background-color: #f3f4f5;
  &[disabled] {
    color: #ccc;
  }
}
.numberbox-button-plus {
  right: 0;
  color: white;
  background-color: var(--primary);
  border-left: 1px solid var(--primary);
  &[disabled] {
    opacity: 0.6;
  }
}

.numberbox-button-minus-icon {
  font-family: 'seeds-icons';
  &:extend(.seeds-icon-minus all);
}
.numberbox-button-plus-icon {
  font-family: 'seeds-icons';
  &:extend(.seeds-icon-plus all);
}

.numberbox[disabled] {
  pointer-events: none;
  .numberbox-input,
  input[type='number']:disabled {
    color: #ccc;
    opacity: 1;
    -webkit-text-fill-color: #ccc;
  }

  .numberbox-button-minus {
    color: #ccc;
  }
  .numberbox-button-plus {
    opacity: 0.6;
  }
}
