const tip-opacity = 0.94
const tip-transform-hidden = rotate(0.02deg) translateX(-50%) translateY(-80%)
const tip-transform-visible = rotate(0.02deg) translateX(-50%) translateY(-100%)

.tip
	position relative

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

	: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 ui-background transparent transparent transparent
		transform tip-transform-hidden
		default-transition

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

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