/**
 * Utilities.
 *
 * Single-purpose helpers only, all built from tokens. Anything that needs three or more of
 * these at once belongs in components.css as a named component instead.
 */

.alt-flex {
	display: flex;
	gap: var(--alt-space-2);
}

.alt-flex--wrap { flex-wrap: wrap; }
.alt-flex--center { align-items: center; }
.alt-flex--between { justify-content: space-between; }
.alt-flex--column { flex-direction: column; }

.alt-mt-0 { margin-top: 0; }
.alt-mt-1 { margin-top: var(--alt-space-1); }
.alt-mt-2 { margin-top: var(--alt-space-2); }
.alt-mt-3 { margin-top: var(--alt-space-3); }
.alt-mt-4 { margin-top: var(--alt-space-4); }
.alt-mt-5 { margin-top: var(--alt-space-5); }

.alt-text-center { text-align: center; }

.alt-list-plain {
	margin: 0;
	padding: 0;
	list-style: none;
}

.alt-full-bleed {
	width: 100%;
}

/* Hide from everyone, including assistive technology. Use .alt-sr-only when the content
   should still be announced. */
.alt-hidden {
	display: none !important; /* Compatibility: must beat a component's own display rule. */
}