/**
 * Pause/play chip injected by assets/js/motion-toggle.js over the hero
 * recordings and the master video (WCAG 2.2.2), plus the master video's
 * sound toggle.
 * Front end only, like the other utilities: the editor never loads the
 * script, so it never has the button.
 *
 * A translucent dark chip reads on both photography and the red panel, and
 * keeps the white glyph above AA whatever sits under it.
 */

.has-motion-toggle {
	position: relative;
}

.motion-toggle {
	position: absolute;
	inset-block-end: var(--wp--preset--spacing--30);
	inset-inline-end: var(--wp--preset--spacing--30);
	z-index: 1;
	display: grid;
	place-items: center;
	min-inline-size: var(--wp--custom--control--min-target);
	min-block-size: var(--wp--custom--control--min-target);
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--button);
	background-color: var(--wp--custom--scrim--control);
	color: var(--wp--preset--color--text-inverse);
	cursor: pointer;
	transition: background-color var(--wp--custom--transition--base);
}

.motion-toggle:hover {
	background-color: var(--wp--preset--color--background-inverse);
}

.motion-toggle:focus-visible {
	outline: var(--wp--custom--focus--ring);
	outline-offset: var(--wp--custom--focus--offset);
}

.motion-toggle svg {
	display: block;
	inline-size: var(--wp--custom--control--icon-size);
	block-size: var(--wp--custom--control--icon-size);
}

/* The sound chip sits to the left of the pause chip. */
.motion-toggle--sound {
	inset-inline-end: calc(var(--wp--preset--spacing--30) + var(--wp--custom--control--min-target) + var(--wp--preset--spacing--20));
}