/* Text + Arrow style for core/button – white, shaft 55px, 45° wings 25px */
.wp-block-button.is-style-text-arrow .wp-block-button__link {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;

  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: 'Montserrat', Arial, Helvetica, sans-serif !important;
  font-size: 20px;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
}

/* Rendera i exakt skala (width/height matchar viewBox) */
.wp-block-button.is-style-text-arrow .wp-block-button__link::after {
  content: "";
  display: inline-block;

  /* Exakta mått för 1:1-px: totalbredd = 55 + 17.677 = 72.677 */
  width: var(--btn-arrow-width, 55.677px);
  height: var(--btn-arrow-height, 35.355px);

  margin-left: 4px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right center;

  /* Pilar och linje i #fff (URL-encodat som %23) */
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72.677 35.355' fill='none' stroke='%23fff' stroke-width='1' stroke-linecap='square' stroke-linejoin='miter'>\
  <!-- Skaft: exakt 55px -->\
  <path d='M0 17.677 H55'/>\
  <!-- Mittlinje: från skaftets ände till spetsens mittpunkt -->\
  <path d='M55 17.677 L72.677 17.677'/>\
  <!-- Vingar: 25px i 45° -->\
  <path d='M55 0 L72.677 17.677'/>\
  <path d='M55 35.355 L72.677 17.677'/>\
</svg>");
}

.wp-block-button.is-style-text-arrow .wp-block-button__link:hover::after,
.wp-block-button.is-style-text-arrow .wp-block-button__link:focus-visible::after {
  transform: translateX(4px);
  opacity: 1;
}

.wp-block-button.is-style-text-arrow .wp-block-button__link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .wp-block-button.is-style-text-arrow .wp-block-button__link::after { transition: none; }
}