/* Button contract: semantic variants must win over legacy `.btn` fills. */
:where(.btn-neutral, .button-neutral, .mr-btn-neutral) {
  --mr-btn-bg: var(--mr-surface-muted, #e7e7e7);
  --mr-btn-border: var(--mr-control-border, #c6c6c6);
  --mr-btn-color: var(--mr-color-text, #1f1f1f);
  --mr-btn-bg-hover: color-mix(in srgb, var(--mr-surface-muted, #e7e7e7) 82%, var(--mr-color-text, #1f1f1f) 18%);
  --mr-btn-border-hover: color-mix(in srgb, var(--mr-control-border, #c6c6c6) 76%, var(--mr-color-text, #1f1f1f) 24%);
  --mr-btn-color-hover: var(--mr-color-text, #1f1f1f);
}

:where(
  .btn, .button, .mr-btn, .mr-button-row a, .button-row a,
  .mrws-editable-button-row a, button.btn, button.button
):is(
  .btn-primary, .button-primary, .mr-btn-primary,
  .btn-secondary, .button-secondary, .secondary, .mr-btn-secondary, .mr-btn-sun,
  .btn-tertiary, .button-tertiary, .mr-btn-tertiary,
  .btn-neutral, .button-neutral, .mr-btn-neutral,
  .btn-outline, .button-outline, .mr-btn-outline,
  .btn-light, .button-light, .mr-btn-white,
  .btn-dark, .button-dark, .mr-btn-dark,
  .btn-link, .button-link, .mr-btn-link
) {
  border-color: var(--mr-btn-border);
  background: var(--mr-btn-bg);
  color: var(--mr-btn-color) !important;
}

:where(
  .btn, .button, .mr-btn, .mr-button-row a, .button-row a,
  .mrws-editable-button-row a, button.btn, button.button
):is(
  .btn-primary, .button-primary, .mr-btn-primary,
  .btn-secondary, .button-secondary, .secondary, .mr-btn-secondary, .mr-btn-sun,
  .btn-tertiary, .button-tertiary, .mr-btn-tertiary,
  .btn-neutral, .button-neutral, .mr-btn-neutral,
  .btn-outline, .button-outline, .mr-btn-outline,
  .btn-light, .button-light, .mr-btn-white,
  .btn-dark, .button-dark, .mr-btn-dark,
  .btn-link, .button-link, .mr-btn-link
):hover {
  border-color: var(--mr-btn-border-hover);
  background: var(--mr-btn-bg-hover);
  color: var(--mr-btn-color-hover) !important;
}

/* Support both descriptive and abbreviated size names used by CMS content. */
:where(.btn, .button, .mr-btn):is(.btn-small, .button-small, .mr-btn-small, .btn-sm, .button-sm, .mr-btn-sm) {
  min-height: var(--mr-control-height-sm, 2.5rem);
  padding: var(--mr-sm-button-padding-y, 0.45rem) var(--mr-sm-button-padding-x, 0.75rem);
  font-size: var(--mr-sm-button-font-size, 0.8rem);
}

:where(.btn, .button, .mr-btn):is(.btn-large, .button-large, .mr-btn-large, .btn-lg, .button-lg, .mr-btn-lg) {
  min-height: var(--mr-control-height-lg, 3.35rem);
  padding: var(--mr-lg-button-padding-y, 1.05rem) var(--mr-lg-button-padding-x, 2.5rem);
  font-size: var(--mr-lg-button-font-size, 1rem);
}

:where(.btn, .button, .mr-btn):is(.btn-pill, .button-pill, .mr-btn-pill) {
  border-radius: var(--mr-radius-pill, 999px);
}

:where(.btn, .button, .mr-btn):is(.btn-square, .button-square, .mr-btn-square) {
  width: var(--mr-button-height, var(--mr-control-height-md, 3rem));
  min-width: var(--mr-button-height, var(--mr-control-height-md, 3rem));
  aspect-ratio: 1;
  padding: 0;
}