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

@mixin component($atRoot: namespace.$defaultAtRoot) {
	display: inline-flex;
	gap: var(--pr-t-spacings-75);
	align-items: center;
	padding: var(--pr-t-spacings-100);
	border-radius: var(--pr-t-border-radius-default);
	background-color: var(--palettes-50, var(--palettes-neutral-50));
	border: 0;
	box-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-300, var(--palettes-neutral-300));
	cursor: pointer;

	&:hover {
		background-color: var(--palettes-100, var(--palettes-neutral-100));
	}

	&:focus-visible {
		@include a11y.focusVisible;
	}

	@at-root ($atRoot) {
		.calloutPopover-content {
			&:empty {
				display: none;
			}
		}

		.calloutPopover-icon {
			color: var(--palettes-700, var(--palettes-neutral-700));
		}

		.calloutPopover-overlay {
			max-inline-size: calc(100vw - (var(--pr-t-spacings-200) * 2));
			display: flex;
			gap: var(--pr-t-spacings-100);

			&:has(.calloutFeedbackList) {
				inline-size: var(--components-calloutPopover-width);
			}
		}

		.calloutPopover-overlay-head-title {
			display: block;
			font: var(--pr-t-font-body-M);
			font-weight: var(--pr-t-font-fontWeight-semibold);
			padding: 0;
			margin: 0;
			padding-block-end: var(--pr-t-spacings-100);
			margin-block-end: var(--pr-t-spacings-100);
			border-block-end: var(--commons-divider-width) solid var(--palettes-neutral-200);
		}

		.calloutPopover-overlay-icon {
			@include icon.M;

			color: var(--palettes-700, var(--palettes-neutral-700));
			display: block;
		}

		.calloutPopover-overlay-content {
			&:has(.calloutFeedbackList) {
				margin-block-end: var(--pr-t-spacings-100);
			}
		}
	}
}