@use '../styles/mixins';

.modula-admin-ui {
	box-sizing: border-box;
	color: var(--modula-admin-ink);
	font-family: var(--modula-admin-font);
	font-size: var(--modula-admin-text-body);
	line-height: 1.45;

	*,
	*::before,
	*::after {
		box-sizing: inherit;
	}

	button,
	input,
	select,
	textarea {
		font-family: inherit;
	}

	code {
		padding: 0;
		background: none;
		font-family: var(--modula-admin-font-mono);
		font-size: var(--modula-admin-text-mono);
	}

	:focus-visible {
		@include mixins.focus-ring;
	}

	@media (prefers-reduced-motion: reduce) {
		*,
		*::before,
		*::after {
			transition: none !important;
			animation: none !important;
		}
	}
}

// Skeleton placeholders (skeleton/_skeleton.scss). Reduced motion stops it
// through the root rule above.
@keyframes modula-admin-skeleton-pulse {

	50% {
		opacity: 0.45;
	}
}

// Spinner (spinner/_spinner.scss). Reduced motion stops it through the root
// rule above.
@keyframes modula-admin-spinner-spin {

	to {
		transform: rotate(360deg);
	}
}

// Brand loader (brand-loader/_brand-loader.scss): the mark turns one blade
// per loop, so the loop is seamless. Reduced motion stops all three through
// the root rule above; the wordmark then rests filled.
@keyframes modula-admin-brand-loader-turn {

	to {
		transform: rotate(60deg);
	}
}

@keyframes modula-admin-brand-loader-breathe {

	50% {
		transform: translateY(-7px);
	}
}

// The wordmark's fill sweeps across in 1.6s, holds 0.4s, then starts over.
@keyframes modula-admin-brand-loader-sweep {

	0% {
		background-size: 0% 100%;
	}

	80%,
	100% {
		background-size: 100% 100%;
	}
}

// Visually hidden text that screen readers still announce.
.modula-admin-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}