/* ── Shared ──────────────────────────────────────────────────────────────── */

.wp-block-button__link {
  align-items: center;
  display: inline-flex;
  gap: 0.5em;
  /* !important: overrides inline border-radius saved on buttons before the radius control was locked (CHSM-67) */
  border-radius: 0 !important;
}

/* ── Primary button ──────────────────────────────────────────────────────── */

.wp-block-button:not(.is-style-outline):not(.is-style-link) .wp-block-button__link {
  transition: var(--wp--custom--transition--button);
}

.wp-block-button:not(.is-style-outline):not(.is-style-link) .wp-block-button__link:hover {
  text-decoration: none;
}

/* ── Link button ─────────────────────────────────────────────────────────── */

.wp-block-button.is-style-link .wp-block-button__link {
  background-color: transparent;
  border: none;
  color: var(--wp--preset--color--marine);
  padding: 0;
  text-decoration: none;
  transition: var(--wp--custom--transition--button);
}

/* Default arrow — hidden automatically once an inline image/icon is inserted into the button text (CHSM-92) */
.wp-block-button.is-style-link:not(.has-chs-icon) .wp-block-button__link:not(:has(img))::after {
  border: solid var(--wp--preset--color--marine);
  border-width: 0 2px 2px 0;
  content: " ";
  display: inline-block;
  height: 8px;
  margin-bottom: 1px;
  margin-left: 4px;
  margin-right: 6px;
  padding: 3px;
  transform: rotate(-45deg);
  transition: border-color 0.35s ease-in-out, margin-left 0.35s ease-in-out, margin-right 0.35s ease-in-out;
  width: 8px;
}

.wp-block-button.is-style-link .wp-block-button__link:hover {
  background-color: transparent;
  color: var(--wp--preset--color--primary);
  text-decoration: underline;
}

.wp-block-button.is-style-link:not(.has-chs-icon) .wp-block-button__link:hover:not(:has(img))::after {
  border-color: var(--wp--preset--color--primary);
  margin-left: 10px;
  margin-right: 0;
}

/* ── Outline button ──────────────────────────────────────────────────────── */

.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent;
  color: var(--wp--preset--color--marine);
  border: 1px solid var(--wp--preset--color--marine);
  padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
  transition: var(--wp--custom--transition--button);
  text-decoration: none;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  color: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--primary);
  background-color: transparent;
  text-decoration: none;
}

/* ── Secondary button ──────────────────────────────────────────────────────── */

.wp-block-button.is-style-secondary .wp-block-button__link {
  background-color: var(--wp--preset--color--sky);
  color: var(--wp--preset--color--black);
}

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

/* ── Icon (CHSM-108) ──────────────────────────────────────────────────────── */
/* Works on every button style: background-color reads currentColor, so the icon
   automatically matches the button's text color and its hover-state color change. */

.wp-block-button.has-chs-icon .wp-block-button__link::after {
  background-color: currentColor;
  content: "";
  display: inline-block;
  height: 1em;
  mask-image: var(--chs-icon);
  -webkit-mask-image: var(--chs-icon);
  mask-position: center;
  -webkit-mask-position: center;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-size: contain;
  transition: transform 0.35s ease-in-out;
  width: 1em;
}

/* Slide-on-hover motion, matching the Link style's default arrow (CHSM-92) */
.wp-block-button.has-chs-icon .wp-block-button__link:hover::after {
  transform: translateX(6px);
}