/*------------------------------------------------------------
	Messages — `.st-message`, success / error / debug
------------------------------------------------------------*/

.st-message {
	margin-bottom: 1.5rem;
	padding: 1rem 1.5rem;
	border-radius: var(--st-radius--sm);
	border: 1px solid transparent;
}

.st-message--success {
	color: color-mix(
		in srgb,
		var(--st-color--accent-6) 80%,
		var(--st-color--contrast)
	);
	background-color: color-mix(
		in srgb,
		var(--st-color--accent-6) 10%,
		var(--st-color--accent-5)
	);
	border-color: color-mix(
		in srgb,
		var(--st-color--accent-6) 70%,
		var(--st-color--accent-5)
	);
}

.st-message--error {
	color: color-mix(
		in srgb,
		var(--st-color--accent-3) 80%,
		var(--st-color--contrast)
	);
	background-color: color-mix(
		in srgb,
		var(--st-color--accent-3) 10%,
		var(--st-color--accent-5)
	);
	border-color: color-mix(
		in srgb,
		var(--st-color--accent-3) 70%,
		var(--st-color--accent-5)
	);
}

.st-message--debug {
	font-size: 0.875rem;
	color: var(--st-color--contrast);
	background-color: var(--st-color--accent-5);
	border-color: var(--st-color--accent-5);
	word-break: break-word;
}