/**
 * @file widgets/stepper.css
 * Reusable quantity stepper (wwf_tw/stepper). Decorated by stepper.js: a
 * round − / + flanking a ringed number. Palette-aware via --wwf-color-stepper.
 * Served raw (preprocess: false), so it is plain CSS, not Tailwind.
 */
.tw-stepper__wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.tw-stepper__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  /* Rest: a lighter gray; hover darkens to the full stepper color. */
  background: color-mix(in srgb, var(--wwf-color-stepper) 55%, #fff);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

/* Hover only on devices with a real hover: a tap on touch screens would leave
   the darkened state stuck until the next tap elsewhere. */
@media (hover: hover) {
  .tw-stepper__btn:hover {
    background: var(--wwf-color-stepper);
  }
}

.tw-stepper__btn:disabled {
  pointer-events: none;
  opacity: 0.4;
}

/* The number: keyboard-editable, spinner hidden, ringed in the stepper color.
   Text inherits the surrounding foreground (the cart's look). */
input.tw-stepper {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  background: #fff;
  /* Same lighter gray as the +/- buttons at rest. */
  border: 2px solid color-mix(in srgb, var(--wwf-color-stepper) 55%, #fff);
  border-radius: 9999px;
  appearance: textfield;
}

input.tw-stepper::-webkit-outer-spin-button,
input.tw-stepper::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

/* Focus: a clear accent ring (palette-aware), distinct from the resting
   stepper-gray border. */
input.tw-stepper:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--wwf-focus-ring-color, #f89840);
}