@zeix/ui-element/docs-src/components/card-callout/card-callout.css

UIElement - a HTML-first library for reactive Web Components

card-callout {
	display: block;
	position: relative;
	padding: var(--space-s) var(--space-s) var(--space-s) var(--space-xl);
	margin: 0 0 var(--space-l);
	font-size: var(--font-size-m);
	line-height: var(--line-height-l);
	background: var(--color-blue-20);
	border-left: var(--space-xxs) solid var(--color-blue-50);
	border-radius: var(--space-xs);

	&::before {
		position: absolute;
		content: "ℹ️";
		left: var(--space-s);
	}

	> *:last-child {
		margin-bottom: 0;
	}

	&.tip {
		background: var(--color-green-20);
		border-color: var(--color-green-50);

		&::before {
			content: "💡";
		}
	}

	&.note {
		background: var(--color-neutral-20);
		border-color: var(--color-neutral-50);

		&::before {
			content: "💬";
		}
	}

	&.caution {
		background: var(--color-orange-20);
		border-color: var(--color-orange-50);

		&::before {
			content: "⚠️";
		}
	}

	&.danger {
		background: var(--color-pink-20);
		border-color: var(--color-pink-50);

		&::before {
			content: "🚨";
		}
	}
}

@media (prefers-color-scheme: dark) {
	card-callout {
		background: var(--color-blue-80);

		&.tip {
			background: var(--color-green-80);
		}

		&.note {
			background: var(--color-neutral-80);
		}

		&.caution {
			background: var(--color-orange-80);
		}

		&.danger {
			background: var(--color-pink-80);
		}
	}
}