.tooltip {
	font-family: $font-family-main;
	background: var(--color-dark-tinted);
	color: var(--color-text-light);
	// font-weight: bold;
	padding: 4px 8px;
	font-size: 13px;
	border-radius: 4px;
	display: none;
	box-shadow: 0 0 1em rgba(0,0,0,0.2);
	z-index: 10000;

	.is-dark-mode & {
		background: var(--color-light-shade);
		color: var(--color-text);
	}

	&[data-show] {
		display: block;
		animation: 0.4s fadeIn;
	}

	> p {
		margin: 0px;
		font-family: $font-family-main;
	}

	.tooltip-arrow,
	.tooltip-arrow::before {
		position: absolute;
		width: 8px;
		height: 8px;
		z-index: -1;
	}

	.tooltip-arrow::before {
		content: '';
		transform: rotate(45deg);
		background: var(--color-dark-tinted);

		.is-dark-mode & {
			background: var(--color-light-shade);
		}
	}

	&[data-popper-placement^='top']>.tooltip-arrow {
		bottom: -4px;
	}

	&[data-popper-placement^='bottom']>.tooltip-arrow {
		top: -4px;
	}

	&[data-popper-placement^='left']>.tooltip-arrow {
		right: -4px;
	}

	&[data-popper-placement^='right']>.tooltip-arrow {
		left: -4px;
	}
}
