/* Play button: pinned bottom-right instead of Elementor's default
 * centered position, and restyled as a flat red rounded-square button — the native default is a
 * large white circle-plus-triangle glyph with a drop shadow, nothing like the design. Native rule
 * (frontend.css) is
 * `.elementor-custom-embed-play{inset-block-start:50%;inset-inline-start:50%;
 * transform:translate(calc(-50% * var(--direction-multiplier)),-50%)}` — cleared here rather than
 * overridden with new insets fighting the old ones. Uses inset-inline-end (not right) so it still
 * pins to the trailing edge in RTL, matching the native rule's own logical-property convention. */
.elementor-widget-video .elementor-custom-embed-play {
	inset-block-start: auto;
	inset-inline-start: auto;
	inset-block-end: var(--s3);
	inset-inline-end: var(--s3);
	transform: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--s7);
	height: var(--s7);
	background-color: var(--color-red-200-base);
	border-radius: var(--s05);
	color: var(--color-white);
	transition: background-color 0.3s;
}

/* Same hover treatment as the Button widget's Primary variant (extensions/button/style.css) —
 * background shifts to Red-500, foreground to Pearl-200. The icon below reads its colour from
 * `color` via `currentColor`, so this one rule repaints both the button and its icon. */
.elementor-widget-video .elementor-custom-embed-play:hover,
.elementor-widget-video .elementor-custom-embed-play:focus {
	background-color: var(--color-red-500);
	color: var(--color-pearl-200-base);
}

/* The native icon element (whatever glyph is picked in the panel) is hidden outright — the design
 * wants this exact triangle, not a font glyph, so it's drawn instead via mask-image below (same
 * technique as the Button widget's own arrow icon — see the shared "ARROW LINK" section of
 * style.css — and the Quote widget's quote-mark: a single-colour SVG masked onto a plain div, so
 * its colour stays one CSS declaration and follows currentColor for the hover state above). */
.elementor-widget-video .elementor-custom-embed-play i,
.elementor-widget-video .elementor-custom-embed-play svg {
	display: none;
}

.elementor-widget-video .elementor-custom-embed-play::before {
	content: "";
	display: block;
	width: var(--s1);
	aspect-ratio: 9 / 10;
	background-color: currentColor;
	mask-image: url("assets/icon-video-play.svg");
	mask-repeat: no-repeat;
	mask-size: contain;
	mask-position: center;
	-webkit-mask-image: url("assets/icon-video-play.svg");
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	-webkit-mask-position: center;
	transition: background-color 0.3s;
}