Tooltips

[data-acl-tooltip] {
	position: relative;

	&:before {
		content: attr(data-acl-tooltip);
		position: absolute;
		bottom: -35px;
		left: 50%;
		padding: 8px;
		transform: translateX(-50%) scale(0);
		transition: transform 0.1s ease-in-out;
		transition-delay: 700ms;
		transform-origin: top;
		pointer-events: none;
		background: #616161e6;
		color: white;
		border-radius: 2px;
		font-size: 12px;
		font-family: Roboto, sans-serif;
		font-weight: 400;
		max-width: 300px;
		width: max-content;
		white-space: normal;
	}

	&:hover:before {
		transform: translateX(-50%) scale(1);
		z-index: 99999999;
	}

	&.acl-tooltip--right {
		&:before {
			left: auto;
			right: -10px;
			bottom: auto;
			top: 50%;
			transform: translate(100%, -50%) scale(0);
			transform-origin: left center;
		}

		&:hover:before {
			transform: translate(100%, -50%) scale(1);
		}
	}

	&.acl-tooltip--left {
		&:before {
			left: -15px;
			right: auto;
			bottom: auto;
			top: 50%;
			transform: translate(-100%, -50%) scale(0);
			transform-origin: right center;
		}

		&:hover:before {
			transform: translate(-100%, -50%) scale(1);
		}
	}

	&.acl-tooltip-disabled {
		&:before {
			display: none;
		}
	}
}

.acl-tooltip--top {
	&:before {
		top: -35px;
		bottom: auto;
		transform: translateX(-50%) scale(0);
		transform-origin: bottom center;
	}
}

.acl-tooltip--left:before,
.acl-tooltip--right:before {
	max-width: 200px;
	width: max-content;
	transition: transform 0s ease-in-out;
	transition-delay: 0.7s;
}

.acl-tooltip--left-aligned {
	&:before {
		bottom: -35px;
		left: 2px;
	}

	&:hover:before {
		transform: scale(1);
	}
}