/* ABOUTME: Defines the tactile, keyboard-aware interaction contract for native buttons. */

/* ABOUTME: Applies the same contract to intentional button-like links via .ui-pressable. */

:is(
  button,
  summary,
  input[type="button"],
  input[type="reset"],
  input[type="submit"],
  .ui-pressable
) {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: opacity 0.22s var(--ease-out),
    background-color 0.15s var(--ease-out),
    border-color 0.15s var(--ease-out),
    box-shadow 0.15s var(--ease-out),
    color 0.15s var(--ease-out),
    padding 0.2s var(--ease-out),
    transform 0.2s var(--ease-out);
}

:is(
  button,
  summary,
  input[type="button"],
  input[type="reset"],
  input[type="submit"],
  .ui-pressable
):focus {
  outline: none;
}

html:not([data-input-mode="pointer"]) :is(
  button,
  summary,
  input[type="button"],
  input[type="reset"],
  input[type="submit"],
  .ui-pressable
):focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

:is(
  button,
  summary,
  input[type="button"],
  input[type="reset"],
  input[type="submit"],
  .ui-pressable
):active:not(:disabled, [disabled], [aria-disabled="true"], [data-ui-press="none"]) {
  /* A press dims in place, the way native controls do: it lands the instant a
     finger does and nothing moves, so the control stays exactly under the
     touch. The release fades back (0.22s, above). */
  opacity: 0.55;
  transition-duration: 0s;
}


@media (prefers-reduced-motion: reduce) {
  :is(
    button,
    summary,
    input[type="button"],
    input[type="reset"],
    input[type="submit"],
    .ui-pressable
  ) {
    transition-duration: 0.01ms !important;
  }
}