@use '@lucca-front/scss/src/commons/utils/keyframe';
@use '@lucca-front/scss/src/commons/utils/namespace';

@mixin component($atRoot: namespace.$defaultAtRoot) {
	background-color: var(--components-tooltip-background-color);
	color: var(--components-tooltip-color);
	padding-block: var(--pr-t-spacings-50);
	padding-inline: var(--pr-t-spacings-100);
	max-inline-size: var(--components-tooltip-max-width);
	border-radius: var(--pr-t-border-radius-default);
	font: var(--pr-t-font-body-XS);
	transform-origin: var(--components-tooltip-transformOrigin);
	margin: var(--components-tooltip-margin);
	text-align: center;
	inline-size: fit-content;
	animation-name: scaleIn;
	animation-duration: var(--commons-animations-durations-fast);
	animation-iteration-count: 1;
	overflow-wrap: break-word;

	@include keyframe.scaleIn;

	&:empty {
		display: none;
	}

	@at-root ($atRoot) {
		// Prevent Safari to display a native tooltip
		[luTooltipWhenEllipsis] {
			@supports (background-image: -webkit-named-image(i)) {
				@media (hover: hover) {
					&::after {
						content: '';
						display: block;
					}
				}
			}
		}
	}
}