@import "vars";

@mixin tip {
	position: relative;

	.tip {
		visibility: hidden;
		position: absolute;
		z-index: 10000;
		pointer-events: none;
		display: block;
		width: max-content;
		height: 30px;
		padding: 4px 8px;
		line-height: 22px;
		top: calc(100% + 8px);
		left: 50%;
		transform: translateX(-50%);

		text-align: center;
		font-size: 18px;
		color: var(--on-surface);
		opacity: 0;
		transition: opacity ease-out 100ms, visibility step-end 150ms;
		transition-delay: 0ms;
		background-color: var(--surface);
		border-radius: 5px;

		text-transform: initial;
		font-weight: initial;

		&.top {
			top: auto;
			bottom: calc(100% + 8px);
		}
	}

	&:hover, &:active {
		.tip {
			visibility: visible;
			opacity: 1;
			transition: opacity ease-out 100ms;
			transition-delay: 150ms;
		}
	}
}