@use "@gloria/layout/_mixins.scss" as *;

.c-callout {
	--callout-variant-color: var(--color-primary-500);

	position: relative;
	margin: var(--spacing-7) auto;
	border: var(--callout-variant-color) 2px solid;
	border-radius: var(--radius-2);

	&--info {
		--callout-variant-color: var(--color-info-500);
	}

	&--warning {
		--callout-variant-color: var(--color-warning-500);
	}

	&--rose {
		--callout-variant-color: var(--color-rose-500);
	}

	&--blue {
		--callout-variant-color: var(--color-blue-700);
	}

	&--success {
		--callout-variant-color: var(--color-success-500);
	}

	&__title {
		position: absolute;
		left: calc(var(--font-size-lg) * -0.5 - 1px);
		top: -0.75em;
		padding-right: var(--spacing-2);
		font-size: var(--font-size-lg);
		font-weight: var(--font-weight-bold);
		font-family: var(--font-family-heading);
		background: var(--color-common-white);
		color: var(--callout-variant-color);

		.c-icon {
			width: var(--font-size-lg);
			height: var(--font-size-lg);
		}
	}

	&__content {
		padding: var(--spacing-5) var(--spacing-4) var(--spacing-4) var(--spacing-5);
		color: var(--color-secondary-800);

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