@import '../mixins/surface';

.tooltip {
	@include surface;

	--color: var(--on-surface-inverse);
	--background: var(--surface-inverse);
	--radius: var(--container-radius); // todo : set this in a way that makes sense

	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center;
	height: 3.2rem;
	padding: 0 1.2rem;
	font-size: 1.4rem;
	line-height: 1.6rem;
	text-transform: initial;

	&:global(.dense),
	:global(.dense) & {
		height: 2.4rem;
		padding: 0 0.8rem;
		font-size: 1rem;
		line-height: 1.2rem;
	}
}

[data-tooltip] {
	position: relative;
	z-index: 24;

	&::after {
		content: attr(data-tooltip);
		position: absolute;
		top: calc(100% + 0.8rem);
		left: 50%;
		transform: translateX(-50%) scale(0);
		opacity: 0;
		transition: opacity 150ms linear 100ms, transform 150ms linear 100ms; // todo : use animation vars

		@extend .tooltip;
	}

	&:hover:not(:active)::after {
		opacity: 1;
		transform: translateX(-50%) scale(1);
		transition: opacity 75ms, transform 75ms; // todo : use animation vars
	}
}