/*
  Adapted from /preview/assets/css/components/buttons.css. Two changes,
  both required by how core/button works — values are otherwise
  identical to the static build:

  1. core/button puts a custom `className` on the *wrapping* div, not
     the inner <a> the visual styles need to target. Rather than hand-
     editing the inner anchor's classes (which WordPress's block
     validator would flag as unexpected content on next save), the
     .btn/.btn--primary/.btn--secondary styles are re-hooked onto
     `is-style-elev8-*` block-style variations — the same first-class
     mechanism WP itself uses for its built-in "Outline"/"Fill" button
     styles (registered in inc/blocks.php).

  2. The trailing arrow was an inline <svg> sitting inside the button's
     text in the static build. Button labels are edited as rich text in
     WordPress, and rich text + embedded <svg> doesn't survive editing
     reliably, so the arrow is now a CSS mask icon on ::after instead —
     same currentColor behaviour (flips white/near-black/white per
     variant automatically), but the label stays a clean, safely-
     editable text field.
*/

.wp-block-button.is-style-elev8-primary > .wp-block-button__link,
.wp-block-button.is-style-elev8-secondary > .wp-block-button__link,
.wp-block-button.is-style-elev8-secondary-on-dark > .wp-block-button__link,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 1.5rem;
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 700;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  transition: background-color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
  white-space: nowrap;
  text-decoration: none;
}

.wp-block-button.is-style-elev8-primary > .wp-block-button__link:active,
.wp-block-button.is-style-elev8-secondary > .wp-block-button__link:active,
.wp-block-button.is-style-elev8-secondary-on-dark > .wp-block-button__link:active,
.btn:active {
  transform: translateY(1px);
}

/* Trailing arrow, drawn with a mask so it always matches the button's
   current text color (see note 2 above). */
.wp-block-button.is-style-elev8-primary > .wp-block-button__link::after,
.wp-block-button.is-style-elev8-secondary > .wp-block-button__link::after,
.wp-block-button.is-style-elev8-secondary-on-dark > .wp-block-button__link::after,
.btn::after {
  content: "";
  width: 1.05em;
  height: 1.05em;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='12' x2='19' y2='12'%3E%3C/line%3E%3Cpolyline points='13 6 19 12 13 18'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='12' x2='19' y2='12'%3E%3C/line%3E%3Cpolyline points='13 6 19 12 13 18'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center / contain;
}

/* Solid brand red, verified ~5.3:1 contrast with white text (AA) */
.wp-block-button.is-style-elev8-primary > .wp-block-button__link {
  background: var(--c-red-solid);
  color: var(--wp--preset--color--white);
}

.wp-block-button.is-style-elev8-primary > .wp-block-button__link:hover {
  background: var(--c-red-hover);
}

.wp-block-button.is-style-elev8-secondary > .wp-block-button__link {
  background: transparent;
  border-color: var(--wp--preset--color--near-black);
  color: var(--wp--preset--color--near-black);
}

.wp-block-button.is-style-elev8-secondary > .wp-block-button__link:hover {
  background: var(--wp--preset--color--near-black);
  color: var(--wp--preset--color--white);
}

/* For use on dark backgrounds (final CTA band, etc.) */
.wp-block-button.is-style-elev8-secondary-on-dark > .wp-block-button__link {
  background: transparent;
  border-color: var(--wp--preset--color--white);
  color: var(--wp--preset--color--white);
}

.wp-block-button.is-style-elev8-secondary-on-dark > .wp-block-button__link:hover {
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--near-black);
}

.wp-block-button.btn--block > .wp-block-button__link,
.btn--block {
  width: 100%;
}