/**
 * EP AR Preview — front-end button.
 *
 * Deliberately restrained: this sits inside a customer's theme, so it inherits
 * their type and colour rather than imposing a palette. Only layout, spacing
 * and the icon are opinionated.
 *
 * Selectors are `a.ep-ar`, not `.ep-ar`. Plugin CSS is injected BEFORE the main
 * theme stylesheet, so a theme's own `a { color: … }` rule would otherwise win
 * on equal specificity and repaint the button as a plain themed link. The house
 * rule forbids overriding by force, so the element-plus-class selector wins instead.
 */

a.ep-ar {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	margin: 0.35em 0;
	padding: 0.7em 1.15em;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: 0.95em;
	line-height: 1.2;
	text-decoration: none;
	color: inherit;
	background: transparent;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* A faint wash of the inherited colour. Works against a light or dark theme
   without the plugin needing to know which, and keeps the label legible, which
   an inverted fill could not guarantee. */
a.ep-ar:hover,
a.ep-ar:focus-visible {
	background: color-mix(in srgb, currentColor 12%, transparent);
	text-decoration: none;
	color: inherit;
}

/* Fallback for engines without color-mix: a plain low-alpha grey wash. Declared
   first so color-mix above overrides it where supported. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
	a.ep-ar:hover,
	a.ep-ar:focus-visible {
		background: rgba(127, 127, 127, 0.14);
	}
}

/* Themes commonly underline body links with a rule like
   `.page-content a { text-decoration: underline }`. That matches at the same
   specificity as `a.ep-ar` and, because plugin CSS is injected first, it wins —
   the button renders as a correctly-shaped pill with an underlined label. The
   rel attribute is part of what this element genuinely is, so using it lifts
   specificity to 0,2,1 without resorting to a forced override. */
a.ep-ar[rel="ar"],
a.ep-ar[rel="ar"]:hover,
a.ep-ar[rel="ar"]:focus-visible {
	text-decoration: none;
}

a.ep-ar:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

a.ep-ar .ep-ar-icon {
	width: 1.15em;
	height: 1.15em;
	flex: 0 0 auto;
	color: inherit;
}

a.ep-ar .ep-ar-label {
	color: inherit;
}

a.ep-ar .ep-ar-size {
	opacity: 0.65;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	a.ep-ar {
		transition: none;
	}
}