.buy-button-teaser {
  --button-height: 36px;
  font: var(--typography-body-small);
  position: relative;
  height: var(--button-height);
}

.buy-button-teaser__add-to-cart {
  width: 100%;
  height: var(--button-height);
  padding: 0 var(--spacing-sm);
  border: none;
  font-weight: bold;
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: var(--radius-xs);
}

.buy-button-teaser__quantity {
  display: flex;
  height: var(--button-height);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  overflow: hidden;
}

.buy-button-teaser__plus,
.buy-button-teaser__minus {
  width: var(--button-height);
  padding: 0 var(--spacing-md);
  border: none;
  background: transparent;
  cursor: pointer;
}

.buy-button-teaser__minus {
  background: transparent url('../../../icons/111111/minus.svg') center no-repeat;
}

.buy-button-teaser__plus {
  background: transparent url('../../../icons/111111/plus.svg') center no-repeat;
}

.buy-button-teaser__quantity-input {
  font-weight: bold;
  text-align: center;
  border: none;
  padding: 0;
}

.buy-button-teaser__quantity-input::-webkit-outer-spin-button,
.buy-button-teaser__quantity-input::-webkit-inner-spin-button {
  /* display: none; <- Crashes Chrome on hover */
  -webkit-appearance: none;
  margin: 0; /* <- Apparently some margin are still there even though it's hidden */
}

.buy-button-teaser__update-indicator {
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  background-color: var(--color-white-o-25);
  cursor: wait;
}