/* NumberInput Component Styles — one object: the field is the slider. */

.mint-number-input {
  display: flex;
  max-width: 100%;
}

/* ---------- Field wrapper (scrub area + steppers) ---------- */

.mint-number-input__field {
  position: relative;
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: stretch;
  overflow: hidden;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mint-number-input--sm .mint-number-input__field { min-height: var(--form-height-sm); }
.mint-number-input--md .mint-number-input__field { min-height: var(--form-height-md); }
.mint-number-input--lg .mint-number-input__field { min-height: var(--form-height-lg); }

.mint-number-input__field:hover:not(:has(:disabled)) {
  border-color: var(--text-muted);
}

.mint-number-input__field:focus-within {
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring-soft);
}

.mint-number-input--error .mint-number-input__field {
  border-color: var(--mint-error);
}

.mint-number-input--error .mint-number-input__field:focus-within {
  box-shadow: var(--focus-ring-soft-error);
}

.mint-number-input--disabled .mint-number-input__field {
  opacity: var(--mint-disabled-opacity);
  background-color: var(--bg-tertiary);
}

/* ---------- Scrub area: range fill (wash + rule) lives under the value ---------- */

.mint-number-input__scrub {
  position: relative;
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  gap: 0.375rem;
}

.mint-number-input--slider .mint-number-input__scrub {
  cursor: ew-resize;
  touch-action: none;
}

.mint-number-input--slider .mint-number-input__scrub:focus-visible {
  outline: none;
  box-shadow: inset var(--focus-ring-soft);
}

.mint-number-input__wash,
.mint-number-input__rule {
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--mint-number-input-fill, 0%);
  pointer-events: none;
  transition: width 0.1s ease;
}

.mint-number-input__wash {
  top: 0;
  background: color-mix(in srgb, var(--color-primary) 9%, transparent);
}

.mint-number-input__rule {
  height: 2px;
  background: var(--color-primary);
}

/* ---------- Numeric input — left-aligned, Fira Code ---------- */

.mint-number-input__input {
  position: relative;
  flex: 1;
  min-width: 0;
  width: 100%;
  text-align: left;
  background-color: transparent;
  color: var(--text-primary);
  border: none;
  outline: none;
  line-height: 1.25;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
  cursor: ew-resize;
  touch-action: pan-y;
}

.mint-number-input__input::-webkit-outer-spin-button,
.mint-number-input__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.mint-number-input__input:disabled { cursor: not-allowed; }

/* Horizontal padding matches BaseInput canonical scale (10/12/16) so FormField's
   12px label indent aligns with the numeric text across all input types. */
.mint-number-input__input--sm { padding: 0.375rem 0.625rem; font-size: 0.8125rem; }
.mint-number-input__input--md { padding: 0.5rem 0.75rem;    font-size: 0.875rem; }
.mint-number-input__input--lg { padding: 0.75rem 1rem;      font-size: 1rem; }

/* ---------- Unit suffix ---------- */

.mint-number-input__unit {
  position: relative;
  flex-shrink: 0;
  padding-right: 0.5rem;
  color: var(--text-muted);
  font-size: 0.6875rem;
  font-family: var(--font-mono);
  user-select: none;
  white-space: nowrap;
}

/* ---------- Steppers — always visible, horizontal, hairline-divided ---------- */

.mint-number-input__steppers {
  display: flex;
  flex-shrink: 0;
}

.mint-number-input__stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.625rem;
  padding: 0;
  background: transparent;
  color: var(--text-secondary-strong);
  border: none;
  border-left: 1px solid var(--border-color);
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.mint-number-input__stepper:hover:not(:disabled) {
  background: var(--color-primary-soft);
  color: var(--_ink-primary);
}

.mint-number-input__stepper:disabled {
  color: var(--text-muted);
  opacity: 0.45;
  cursor: not-allowed;
}

.mint-number-input__stepper svg {
  width: 0.625rem;
  height: 0.625rem;
}

@media (prefers-reduced-motion: reduce) {
  .mint-number-input__field,
  .mint-number-input__wash,
  .mint-number-input__rule,
  .mint-number-input__stepper {
    transition: none;
  }
}