@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
@import '/assets/b156259ecf951ea64c145aa0f54c7115e89156d2e5434dff5584e0328b19afe7/components/input/input.css';

@layer cinder.components {
  /* ========================================
 * NUMBER INPUT
 * ======================================== */

  .cinder-input-group:has(> .cinder-number-input__input) > .cinder-number-input__input {
    padding-inline-end: var(--cinder-space-2);
  }

  .cinder-input-group:has(> .cinder-number-input__input) > .cinder-input-group__trailing {
    align-items: stretch;
    max-inline-size: none;
    gap: 0;
    padding-inline: 0;
  }

  .cinder-number-input[data-invalid] .cinder-number-input__stepper {
    border-inline-start-color: var(--cinder-status-danger-solid);
  }

  .cinder-number-input__stepper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    inline-size: 2.25rem;
    padding: 0;
    background: transparent;
    border: none;
    border-inline-start: 1px solid var(--cinder-border-muted);
    color: var(--cinder-text-muted);
    font-size: var(--cinder-text-sm);
    cursor: pointer;
    appearance: none;
    transition:
      background var(--cinder-duration-fast) var(--cinder-ease-standard),
      color var(--cinder-duration-fast) var(--cinder-ease-standard);
  }

  .cinder-number-input__adornment {
    display: inline-flex;
    align-items: center;
    padding-inline: var(--cinder-space-2);
    color: var(--cinder-text-muted);
    white-space: nowrap;
  }

  @media (hover: hover) {
    .cinder-number-input__stepper:hover:not(:disabled) {
      background: var(--cinder-surface-hover);
      color: var(--cinder-text-default);
    }
  }

  .cinder-number-input__stepper:focus-visible {
    /* Transparent placeholder keeps the forced-colors outline channel; the visible
   * ring is an INSET box-shadow so the focused stepper is individually
   * identifiable. (The outer .cinder-number-input:focus-within ring only signals
   * that *some* child has focus, not which one — and an outset ring here would
   * collide with it.) This is a self-owned ring, distinct from the shared
   * --_cinder-focus-ring-shadow outer-ring recipe used by most controls. */
    outline: var(--cinder-ring-width) solid transparent;
    box-shadow: inset 0 0 0 var(--cinder-ring-width) var(--cinder-ring-color);
    background: var(--cinder-surface-hover);
    color: var(--cinder-text-default);
  }

  @media (forced-colors: active) {
    .cinder-number-input__stepper:focus-visible {
      outline: var(--cinder-ring-width) solid ButtonText;
      outline-offset: -2px;
    }
  }

  .cinder-number-input__stepper:disabled {
    color: var(--cinder-text-disabled);
    cursor: not-allowed;
  }

  @media (pointer: coarse) {
    .cinder-number-input__stepper {
      min-inline-size: 2.75rem;
      min-block-size: 2.75rem;
    }
  }
}