/* css for Alerts */
.alert {
	border: none;
	border-radius: var(--border-radius);
	padding: 1rem 1.25rem;
	box-shadow: var(--shadow-sm);
	border-left: 4px solid;
	background: var(--surface-card);
}

.alert-success {
	border-left-color: var(--success);
	background: linear-gradient(135deg, color-mix(in srgb, var(--success) 10%, transparent) 0%, color-mix(in srgb, var(--success) 5%, transparent) 100%);
}

.alert-warning {
	border-left-color: var(--warning);
	background: linear-gradient(135deg, color-mix(in srgb, var(--warning) 10%, transparent) 0%, color-mix(in srgb, var(--warning) 5%, transparent) 100%);
}

.alert-danger {
	border-left-color: var(--danger);
	background: linear-gradient(135deg, color-mix(in srgb, var(--danger) 10%, transparent) 0%, color-mix(in srgb, var(--danger) 5%, transparent) 100%);
}

.alert-info {
	border-left-color: var(--info);
	background: linear-gradient(135deg, color-mix(in srgb, var(--info) 10%, transparent) 0%, color-mix(in srgb, var(--info) 5%, transparent) 100%);
}