@use '@lucca-front/icons/src/commons/utils/icon';
@use '@lucca-front/scss/src/commons/utils/reset';
@use '@lucca-front/scss/src/commons/utils/a11y';
@use '@lucca-front/scss/src/commons/utils/namespace';

@mixin component($atRoot: namespace.$defaultAtRoot) {
	align-items: flex-start;
	position: relative;
	border-radius: var(--pr-t-border-radius-default);
	background-color: var(--components-callout-backgroundColor);
	color: var(--pr-t-color-text);
	box-shadow: var(--components-callout-boxShadow);
	gap: var(--components-callout-gap);
	padding: var(--components-callout-padding);
	font: var(--components-callout-font);
	font-size: var(--components-callout-fontSize); // Deprecated
	line-height: var(--components-callout-lineHeight); // Deprecated

	&:not([hidden]) {
		display: var(--components-callout-display);
	}

	a,
	.link {
		--commons-text-link-color: var(--pr-t-color-text);
		--commons-text-link-hover: var(--palettes-neutral-900);
	}

	@at-root ($atRoot) {
		.callout-content {
			flex: 1;
			display: flex;
			flex-direction: column;
			gap: var(--pr-t-spacings-50);
		}

		.callout-content-title {
			font-weight: var(--pr-t-font-fontWeight-semibold);
		}

		.callout-content-description {
			display: var(--components-callout-content-description-display);
			justify-content: space-between;
			gap: var(--pr-t-spacings-150);
			align-items: flex-start;
		}

		.callout-content-description-actions {
			display: flex;
			gap: var(--pr-t-spacings-75);
			margin-block-start: var(--components-callout-content-description-action-marginBlockStart);
			margin-block-end: var(--components-callout-content-description-action-marginBlockEnd);
			padding-block: var(--components-callout-content-description-action-paddingBlock);
			padding-inline: 0;
		}

		.callout-icon {
			display: inline-flex;
			color: var(--palettes-700, var(--palettes-neutral-700));
		}

		.callout-kill {
			@include reset.button;

			color: var(--palettes-neutral-700);
			text-align: center;
			transition-duration: var(--commons-animations-durations-fast);
			transition-property: background-color;
			block-size: var(--components-callout-kill-size);
			inline-size: var(--components-callout-kill-size);

			&:focus-visible {
				@include a11y.focusVisible($borderRadius: var(--pr-t-border-radius-small));
			}

			&::before {
				@include icon.generate('sign_close');

				font-size: var(--pr-t-font-body-S-lineHeight);
			}
		}
	}
}