/* Native action and navigation controls share presentation, not behavior. */
.rk-button {
  --rk-button-background: transparent;
  --rk-button-border: var(--line-strong);
  --rk-button-ink: var(--ink);
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-inline);
  min-inline-size: var(--target-size);
  min-block-size: var(--target-size);
  max-inline-size: 100%;
  padding-block: var(--inset-control-block);
  padding-inline: var(--inset-control-inline);
  border: var(--stroke-width) solid var(--rk-button-border);
  border-radius: var(--radius-default);
  background: var(--rk-button-background);
  color: var(--rk-button-ink);
  font-family: var(--font-ui);
  font-size: var(--font-body-size);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-body-line);
  letter-spacing: var(--font-tracking);
  font-variation-settings: var(--font-body-axes);
  font-optical-sizing: var(--font-optical-sizing);
  font-synthesis: none;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  vertical-align: middle;
  appearance: none;
  cursor: pointer;
  transition: background-color var(--motion-feedback) var(--motion-easing),
    border-color var(--motion-feedback) var(--motion-easing),
    color var(--motion-feedback) var(--motion-easing);
}

.rk-button__label { min-inline-size: 0; overflow-wrap: anywhere; }
.rk-button > rk-icon { display: inline-flex; flex: none; color: inherit; }
.rk-button[data-icon-only] { padding-inline: var(--inset-control-block); }
.rk-button[data-variant='quiet'] { --rk-button-border: transparent; }
.rk-button[data-variant='filled'] {
  --rk-button-background: var(--ink);
  --rk-button-border: var(--ink);
  --rk-button-ink: var(--surface);
}

.rk-button:not(:disabled):not([aria-disabled='true']):is(:hover, [data-interaction='hover']) {
  --rk-button-background: var(--interaction-hover);
}
.rk-button[data-variant='filled']:not(:disabled):not([aria-disabled='true']):is(:hover, [data-interaction='hover']) {
  --rk-button-background: color-mix(in srgb, var(--ink) 90%, var(--surface));
  --rk-button-border: var(--rk-button-background);
}
.rk-button:not(:disabled):not([aria-disabled='true']):is(:active, [data-interaction='pressed']) {
  --rk-button-background: var(--interaction-pressed);
}
.rk-button[data-variant='filled']:not(:disabled):not([aria-disabled='true']):is(:active, [data-interaction='pressed']) {
  --rk-button-background: color-mix(in srgb, var(--ink) 80%, var(--surface));
  --rk-button-border: var(--rk-button-background);
}
.rk-button:not(:disabled):not([aria-disabled='true']):is(:focus-visible, [data-interaction='focus']) {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}
.rk-button:is(:disabled, [aria-disabled='true']) {
  --rk-button-background: transparent;
  --rk-button-border: var(--line);
  --rk-button-ink: var(--ink-subtle);
  cursor: default;
}
.rk-button[data-variant='quiet']:is(:disabled, [aria-disabled='true']) { --rk-button-border: transparent; }
.rk-button[data-variant='filled']:is(:disabled, [aria-disabled='true']) {
  --rk-button-background: var(--surface-subtle);
  --rk-button-border: var(--surface-subtle);
}

/* Workshop grouping only; controls remain intrinsic at every canvas width. */
.rk-buttons-specimen { display: grid; gap: var(--gap-section); min-inline-size: 0; }
.rk-buttons-specimen__group { display: grid; gap: var(--gap-stack); min-inline-size: 0; }
.rk-buttons-specimen__heading {
  margin: 0;
  color: var(--ink-muted);
  font: var(--font-weight-regular) var(--font-meta-size) / var(--font-meta-line) var(--font-ui);
  font-variation-settings: var(--font-body-axes);
}
.rk-buttons-specimen__row {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--gap-stack);
  min-inline-size: 0;
}
.rk-buttons-specimen__long { max-inline-size: min(100%, 24rem); }

@media (prefers-reduced-motion: reduce) { .rk-button { transition: none; } }
[data-motion='reduced'] .rk-button { transition: none; }

@media (forced-colors: active) {
  .rk-button { background: Canvas; color: ButtonText; border-color: ButtonText; }
  .rk-button[data-variant='quiet'] { border-color: transparent; }
  .rk-button[data-variant='filled'] { background: ButtonText; color: Canvas; border-color: ButtonText; }
  .rk-button:not(:disabled):not([aria-disabled='true']):is(:hover, :active, [data-interaction='hover'], [data-interaction='pressed']) {
    background: Highlight;
    border-color: Highlight;
    color: HighlightText;
  }
  .rk-button:not(:disabled):not([aria-disabled='true']):is(:focus-visible, [data-interaction='focus']) { outline-color: Highlight; }
  .rk-button:is(:disabled, [aria-disabled='true']) {
    background: Canvas;
    color: GrayText;
    border-color: GrayText;
  }
}