/* GENERATED: do not edit. Source build/css/pieces/motion.css. Rebuild with: build/build-css.sh */


[data-bps-motion="paused"],
[data-bps-motion="paused"] * { animation-play-state: paused !important; }


[data-bps-motion="playing"]:has(> .bps-motion-btn:focus):not(:hover),
[data-bps-motion="playing"]:has(> .bps-motion-btn:focus):not(:hover) * { animation-play-state: running !important; }


.bps-motion-btn {
	position: absolute !important;
	z-index: var(--bps-motion-z, 5) !important;
	top: var(--bps-motion-top, auto) !important;
	right: var(--bps-motion-right, var(--bps-d-gutter, 1rem)) !important;
	bottom: var(--bps-motion-bottom, 1rem) !important;
	left: var(--bps-motion-left, auto) !important;
	grid-area: auto !important;
	width: auto !important;
	height: auto !important;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-width: var(--bps-d-tap, 2.75rem) !important;
	min-height: var(--bps-d-tap, 2.75rem) !important;
	padding: 0 .875rem !important;
	margin: 0 !important;
	cursor: pointer;
	font-weight: 600;
	font-size: .875rem;
	line-height: 1.2;
	font-family: inherit;
	color: var(--bps-d-inverse-ink, #fff);
	background: color-mix(in srgb, var(--bps-d-inverse-bg, #111) 72%, transparent);
	border: 1px solid color-mix(in srgb, var(--bps-d-inverse-ink, #fff) 55%, transparent);
	border-radius: var(--bps-d-radius, 4px);
}
.bps-motion-btn:hover { background: color-mix(in srgb, var(--bps-d-inverse-bg, #111) 88%, transparent); }
.bps-motion-btn:focus-visible { outline: 2px solid var(--bps-d-inverse-ink, #fff); outline-offset: 2px; }
.bps-motion-btn svg { flex: none; }


@media (max-width: 767px) {
	.bps-motion-btn .bps-motion-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.bps-motion-btn { padding: 0 !important; justify-content: center; }
}


@media (prefers-reduced-motion: reduce) {
	.bps-motion-pause,
	.bps-motion-pause * { animation-play-state: paused !important; }
	.bps-motion-btn { display: none; }
}