.callout {
	position: relative;
	padding: 24px 16px;
	margin: 0;
	background: var(--sui-color-highlight-secondary);
	border-radius: var(--sui-roundness-normal);
}

.callout:where(:has(> .icon)) {
	padding-inline-start: calc(16px + 1.2em + 12px);
}

.callout > .icon {
	position: absolute;
	inset-block-start: 26px;
	inset-inline-start: 16px;
	width: 1.2em;
	height: 1.2em;
}

.callout > :where(:first-child),
.callout > :where(.icon) + * {
	margin-block-start: 0;
}

.callout > :where(:last-child) {
	margin-block-end: 0;
}

.callout > :where(blockquote) {
	margin: 0;
}

.callout:where(.info) {
	background: var(--sui-color-key-tertiary);
}
.callout:where(.success) {
	background: color-mix(in srgb, var(--sui-color-success) 12%, transparent);
}
.callout:where(.warning) {
	background: color-mix(in srgb, var(--sui-color-warning) 12%, transparent);
}
.callout:where(.destructive) {
	background: color-mix(in srgb, var(--sui-color-error) 12%, transparent);
}