/**
 * Fallback when Gutenberg strips <svg> from button icons.
 * Uses the theme arrow asset so link-style buttons still show → on all viewports.
 */
.btn .icon.icon--arrow:empty {
	display: inline-block;
	flex: 0 0 auto;
	width: var(--icon-width, 0.94rem);
	aspect-ratio: 1.16667;
	margin-left: 0.5rem;
	vertical-align: middle;
	background-color: currentColor;
	color: var(--btn-text-color, var(--primary-color, currentColor));
	-webkit-mask: url("../images/svg/icon--arrow.svg") no-repeat center / contain;
	mask: url("../images/svg/icon--arrow.svg") no-repeat center / contain;
}

.btn.btn--link .icon.icon--arrow:empty {
	margin-left: 0.38rem;
}

/**
 * Theme styles treat any .btn[href*="//"] as external and swap the arrow for
 * icon--link.svg unless the host is allowlisted. Same-site absolute URLs
 * (e.g. http://localhost:1000/…) are not allowlisted, so restore the long
 * right arrow for internal / local buttons (View all, Enquire, etc.).
 */
.btn[data-wpel-link="internal"] .icon.icon--arrow,
.btn[href*="localhost"] .icon.icon--arrow {
	display: inline-block !important;
	flex: 0 0 auto;
	width: var(--icon-width, 0.94rem) !important;
	height: auto !important;
	aspect-ratio: 1.16667;
	margin-left: 0.5rem;
	background: none !important;
	background-image: none !important;
}

.btn[data-wpel-link="internal"] .icon.icon--arrow svg,
.btn[href*="localhost"] .icon.icon--arrow svg {
	display: block !important;
	width: 100%;
	height: 100%;
}

@media (min-width: 47.5rem) {
	.btn .icon.icon--arrow:empty {
		--icon-width: 0.94rem;
	}
}

@media (min-width: 100rem) {
	.btn .icon.icon--arrow:empty {
		--icon-width: 1rem;
	}
}