/* Co-located stylesheet for <BackgroundVideo> (Framework Contract S-C) - design-specific CSS lives here. Empty by default. */

.vid-btn {
	--vid-bg-icn-o: 0.4;

	/* One static play+pause glyph: paths 1-2 are the pause bars, path 3 is the play
	   triangle. Dim the half that is NOT the current action so the control reflects
	   state without shifting the icon's centre. `s-paused` is set by BackgroundVideo.js
	   on the component's own `.bg` root (same hook name as <ForegroundVideoAutoPlay>). */
	.icn path {
		transition: opacity var(--g-trn-sp) var(--g-trn-tf) 0s;
	}

	.icn path:nth-of-type(3) {
		opacity: var(--vid-bg-icn-o);
	}
}

.s-paused .vid-btn {

	.icn path:nth-of-type(1),
	.icn path:nth-of-type(2) {
		opacity: var(--vid-bg-icn-o);
	}

	.icn path:nth-of-type(3) {
		opacity: 1;
	}
}