.notification { display: grid; grid-template-columns: 36px auto; gap: 10px; padding: 10px; margin-bottom: 10px; color: var(--notification-text-color); background-color: var(--notification-bg-color); border-radius: 8px; box-shadow: 0 3px 8px 0 rgba(var(--shadow-rgb), .05); }
.notification .icon { display: grid; place-items: center; width: 36px; height: 36px; background-color: var(--notification-icon-color); border-radius: 8px; }
.notification .icon i { font-size: 1.125rem; color: var(--notification-text-color); }
.notification .date { margin: 2px auto; font-size: .75rem; font-weight: 500; opacity: .4; }
.notification .message { font-size: .875rem; font-weight: 400; }

.notification.warning {
	--notification-bg-color: var(--notification-warning-bg-color);
	--notification-icon-color: var(--notification-warning-icon-color);
	--notification-text-color: var(--notification-warning-text-color);
}

.notification.danger {
	--notification-bg-color: var(--notification-danger-bg-color);
	--notification-icon-color: var(--notification-danger-icon-color);
	--notification-text-color: var(--notification-danger-text-color);
}