const tip-opacity = 0.97
const tip-transform-hidden = translateX(-50%) translateY(-80%)
const tip-transform-visible = translateX(-50%) translateY(-100%)

mixin tip-before
	content attr(aria-label)
	position absolute
	top -10px
	left 50%
	z-index 100000
	pointer-events none
	opacity 0
	transform tip-transform-hidden
	font-size 0.92rem
	color text-color
	text-shadow none
	padding 0.2rem 0.7rem
	background tip-bg-color
	border 1px solid ui-border-color
	border-radius ui-element-border-radius
	box-shadow shadow-light
	white-space nowrap
	default-transition

mixin tip-after
	content ""
	position absolute
	top -4px
	left 50%
	z-index 100001
	pointer-events none
	opacity 0
	width 0
	height 0
	border-style solid
	border-width 8px 8px 0 8px
	border-color tip-bg-color transparent transparent transparent
	transform tip-transform-hidden
	default-transition

.tip-offset-child
	position absolute !important
	left 0
	top 0
	pointer-events none

// Tooltips are not activated by default.
// This helps loading times as the browser
// doesn't need to create pseudo elements on page load.
.tip
	// ...

// When the browser is idle, we give all tips the "tip-active" class.
.tip-active
	position relative

	:before
		tip-before

	:after
		tip-after

	:hover
		:before
			opacity tip-opacity
			transform tip-transform-visible

		:after
			opacity tip-opacity
			transform tip-transform-visible

.tip-offset-root
	position relative

	:after
		tip-after

	.tip-offset-child
		:before
			tip-before

	:hover
		:after
			opacity tip-opacity
			transform tip-transform-visible

		.tip-offset-child
			:before
				opacity tip-opacity
				transform tip-transform-visible