@charset 'utf-8';
@use 'colours';

.swstats .notification {
	background: linear-gradient(colours.$panel-top, colours.$panel-bottom);
	color: colours.$white;
	padding: 30px;
	margin: 0 0 15px 0;
	border: none;
	display: flex;
	gap: 20px;
	align-items: center;
	h3 {
		color: inherit;
		margin: 0 0 1em 0;
	}

	p {
		margin: 1em 0 0 0;
	}
	
	.buttons {
		margin-top: 20px;
	}
	
	& > svg {
		width: 40px;
		height: auto;
		flex-shrink: 0;
	}
	
	&.red {
		& > svg {
			fill: colours.$red;
		}
	}
	&.green {
		& > svg {
			fill: colours.$green;
		}
	}
	&.happy {
		& > svg {
			fill: colours.$yellow;
			@media (prefers-reduced-motion: no-preference) {
				animation: swstats-happy 1.2s infinite alternate ease-in-out;
			}
		}
	}
}