.tooltip {
	position: absolute;
	z-index: 300;

	visibility: hidden;

	max-width: 25rem;
	padding: 0.5em 1em;

	transition: opacity 0.3s ease;
	text-align: center;

	opacity: 0;
	color: var(--tooltip-text-color);
	border-radius: var(--tooltip-radius);
	background: var(--tooltip-background);

	font-size: var(--tooltip-text-size);

	&.show {
		visibility: visible;

		opacity: 1;
	}

	& .tooltip-arrow {
		position: absolute;
		top: 100%;
		left: 50%;

		width: 0;
		height: 0;
		margin-left: -6px;

		border-width: 6px 6px 0;
		border-style: solid;
		border-color: var(--tooltip-background) transparent transparent transparent;
	}

	&.below {
		& .tooltip-arrow {
			top: -6px;

			border-color: transparent transparent var(--tooltip-background)  transparent;

			border-top: none;
		}
	}
}