/* Reusable Shamaa link-style action.
 * Mirrors the Shawburn core/button "Link" variation, but remains standalone so
 * dynamic/plugin-rendered actions do not depend on Button markup. */
.shamaa-link-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: fit-content;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	color: var(--shamaa-secondary-2, #0075A3) !important;
	font-family: inherit;
	font-size: inherit;
	font-weight: 500 !important;
	line-height: inherit;
	text-decoration: none !important;
}

.shamaa-link-button::after {
	content: "›";
	display: inline-block;
	order: 2;
	flex: 0 0 auto;
	font-size: 1.35em;
	font-weight: 700;
	line-height: .75;
	text-shadow: none;
	transition: text-shadow .2s ease;
}

a.shamaa-link-button,
button.shamaa-link-button {
	cursor: pointer;
}

button.shamaa-link-button {
	appearance: none;
}

a.shamaa-link-button:hover,
a.shamaa-link-button:focus-visible,
button.shamaa-link-button:hover,
button.shamaa-link-button:focus-visible {
	background: transparent !important;
	box-shadow: none !important;
	color: var(--shamaa-secondary-2, #0075A3) !important;
	text-decoration: none !important;
}

a.shamaa-link-button:hover::after,
a.shamaa-link-button:focus-visible::after,
button.shamaa-link-button:hover::after,
button.shamaa-link-button:focus-visible::after {
	text-shadow: 5px 0 currentColor;
}

a.shamaa-link-button:focus-visible,
button.shamaa-link-button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.rtl a.shamaa-link-button:hover::after,
.rtl a.shamaa-link-button:focus-visible::after,
.rtl button.shamaa-link-button:hover::after,
.rtl button.shamaa-link-button:focus-visible::after,
[dir="rtl"] a.shamaa-link-button:hover::after,
[dir="rtl"] a.shamaa-link-button:focus-visible::after,
[dir="rtl"] button.shamaa-link-button:hover::after,
[dir="rtl"] button.shamaa-link-button:focus-visible::after,
[lang^="ar"] a.shamaa-link-button:hover::after,
[lang^="ar"] a.shamaa-link-button:focus-visible::after,
[lang^="ar"] button.shamaa-link-button:hover::after,
[lang^="ar"] button.shamaa-link-button:focus-visible::after,
a.shamaa-link-button:dir(rtl):hover::after,
a.shamaa-link-button:dir(rtl):focus-visible::after,
button.shamaa-link-button:dir(rtl):hover::after,
button.shamaa-link-button:dir(rtl):focus-visible::after {
	text-shadow: -5px 0 currentColor;
}

@media (prefers-reduced-motion: reduce) {
	.shamaa-link-button::after {
		transition: none;
	}
}