/**
 * Storefront styling for track preview links/embeds.
 *
 * Deliberately does not depend on the admin app's CSS custom properties --
 * this loads on the storefront, which may not have app.css loaded at all,
 * and the whole point of full WooCommerce enrichment is that it works
 * under any theme.
 */

.vs-track-preview {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin-left: 0.5em;
	font-size: 0.85em;
	text-decoration: none;
	white-space: nowrap;
}

.vs-track-preview::before {
	content: "\25B6";
	font-size: 0.9em;
}

.vs-track-preview-embed {
	position: relative;
	width: 100%;
	max-width: 480px;
	aspect-ratio: 16 / 9;
	margin: 0.5em 0;
}

.vs-track-preview-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}