@use '../../theme/styles' as theme;

.wr-input-number {
  display: inline-block;

  // Steppers live as a compact vertical column inside the suffix slot.
  // `<wr-input-group>` sets `pointer-events: none` on non-button affixes
  // (selector specificity 0,1,1 — class + `:not(element)`). We chain
  // `.wr-input-group__affix` to match that specificity so our override wins.
  // Stretch to the full input-group height so each ▲ / ▼ button is exactly 50%.
  // Chain `.wr-input-group__affix` to outrank the group's `:not(button)`
  // pointer-events rule (specificity 0,1,1 → ours becomes 0,2,0).
  &__steppers.wr-input-group__affix {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-self: stretch;
    padding: 0;
    margin: 0;
    border-left: 1px solid var(--wr-input-group-border);
    border-radius: 0 var(--wr-input-group-radius) var(--wr-input-group-radius) 0;
    overflow: hidden;
    pointer-events: auto;
  }

  &__step {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0 0.5rem;
    flex: 1 1 50%;
    min-height: 0;
    min-width: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--wr-color-medium);
    cursor: pointer;
    outline: 0;
    transition:
      color var(--wr-transition-base),
      background var(--wr-transition-base);

    // Divider between ▲ and ▼.
    & + & {
      border-top: 1px solid var(--wr-input-group-border);
    }

    &:hover:not(:disabled) {
      color: var(--wr-color-primary);
      background: rgba(var(--wr-color-primary-rgb), 0.08);
    }

    // Pressed state — clearer feedback on click + held auto-repeat.
    &:active:not(:disabled) {
      color: var(--wr-color-primary);
      background: rgba(var(--wr-color-primary-rgb), 0.18);
    }

    // Suppress the focus ring from mouse clicks — buttons are tabindex="-1"
    // so this only affects accidental focus.
    &:focus:not(:focus-visible) {
      background: transparent;
    }

    &:disabled {
      cursor: not-allowed;
      opacity: 0.4;
    }
  }

  &--disabled {
    opacity: 0.7;
  }
}