/*
  "Text w/ Arrow" links (Insert/Edit Link > Button Type > Text w/ Arrow)
  The chevron used to be saved as an inline <svg> in the post content, which the host's firewall
  blocks on save. It's now drawn here, so the saved link only needs class="button button-w-arrow".
  Same size/spacing/hover as the old svg._chevron_right (src/sass/inc/_button.scss); takes the link's color.
  Loaded on the front end and in the editors (sf_resources/_functions_mods.php).
*/
a.button-w-arrow::after {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 8px;
  height: 16px;
  margin-left: 13px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z'/%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 384 512'%3E%3Cpath d='M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z'/%3E%3C/svg%3E") no-repeat center / contain;
  transform: translateX(0);
  transition: 0.2s all ease;
}

/* Links saved without a text color got the script's default arrow color (chevron_right(input = "#0075C9")) */
a.button-w-arrow:not([data-sf-button_text_color])::after,
a.button-w-arrow[data-sf-button_text_color=""]::after {
  background-color: #0075C9;
}

a.button-w-arrow:hover::after,
a.button-w-arrow.hover::after {
  transform: translateX(2px);
}

/* Links saved before this change still contain the inline svg until they're migrated: don't draw a second arrow */
a.button-w-arrow:has(> svg._chevron_right)::after {
  content: none;
}