/* components/notice: a message on a surface with a bar at the start: the accent for a status, the
   danger colour for an alert. */
@layer components {
	.dv-notice {
		margin-block: var(--space-3);
		padding: var(--space-2) var(--space-3);
		background: var(--color-surface);
		border: 1px solid var(--color-border);
		border-inline-start: 0.3em solid var(--color-accent);
	}

	.dv-notice--alert {
		border-inline-start-color: var(--color-danger);
	}

	.dv-notice:focus {
		outline: var(--focus-outline-width) solid var(--color-focus-outline);
		outline-offset: var(--focus-outline-offset);
	}
}