/**
 * Quantity stepper: minus, the number, plus, in one pill.
 *
 * Sized to sit in a table cell next to a variant name without stretching the
 * row, and to stay comfortably tappable on a phone.
 */

.tl-stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid #c9c9c9;
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
  line-height: 1;
  vertical-align: middle;
}

.tl-stepper button {
  appearance: none;
  border: 0;
  background: transparent;
  color: #444;
  font-family: inherit;
  /* Kept in step with the number beside it, so the pill reads as one control
     rather than a big figure between two small marks. */
  font-size: 20px;
  line-height: 1;
  padding: 0;
  width: 38px;
  min-height: 38px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tl-stepper button:hover {
  background: #f1f1f1;
}

.tl-stepper button:focus-visible {
  outline: 2px solid #2e8b57;
  outline-offset: -2px;
}

.tl-stepper-value {
  min-width: 40px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #222;
  /* Tabular figures so the pill does not jump width between 6 and 12. */
  font-variant-numeric: tabular-nums;
}

/* The trash can replaces the minus only at the smallest allowed quantity, so
   the control that reduces a line is also the one that removes it. */
.tl-stepper-trash {
  width: 19px;
  height: 19px;
  fill: currentColor;
  display: none;
}

.tl-stepper[data-tl-at-floor][data-tl-removable="1"] .tl-stepper-minus {
  display: none;
}

.tl-stepper[data-tl-at-floor][data-tl-removable="1"] .tl-stepper-trash {
  display: block;
}

.tl-stepper[data-tl-at-floor][data-tl-removable="1"] .tl-stepper-down:hover {
  background: #fdecea;
  color: #b3261e;
}

/* A press is in flight: the whole pill stops responding rather than each
   button separately, so a double click cannot send two changes. */
.tl-stepper.tl-stepper-busy {
  opacity: 0.55;
  pointer-events: none;
}

.tl-stepper button[disabled] {
  color: #bbb;
  cursor: default;
}

.tl-stepper button[disabled]:hover {
  background: transparent;
}