$c-note-icon-size: space(3);


.c-note {
	@include font-size(s);
	@include font-weight(semi-bold);
	@include border-radius(s);
	padding: space(1);
	color: palette(action, 500);
	background-color: palette(action, 100);
	border: 1px solid currentColor;
	display: flex;
}


.c-note--warning {
	color: palette(warning, 500);
	background-color: palette(warning, 100);
}


.c-note__icon {
	flex: none;
	width: $c-note-icon-size;
	height: $c-note-icon-size;
	margin-right: space(1);
}

.c-note__content {
	a {
		color: palette(secondary, 700);
		&:hover {
			color: palette(secondary, 900);
			text-decoration: underline;
		}
	}
}