.si-tooltip {
	&.loading {
		color: hsla(var(--si-background), 0.2);
		* {
			opacity: 0.5;
			pointer-events: none;
		}
	}
	&__loading {
		width: 22px;
		height: 22px;
		position: absolute;
		display: block;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		border-radius: 50%;
		opacity: 1;
		&:after {
			content: '';
			position: absolute;
			width: 100%;
			height: 100%;
			border-radius: inherit;
			border: 2px dashed transparent;
			border-right: 2px dashed hsl(var(--si-background));
			box-sizing: border-box;
			transition: all 0.25s ease;
			display: block;
			box-shadow: 0px 0px 0px 0px hsla(var(--si-color), 1);
			animation: loadingTooltip 0.6s ease infinite;
		}
		&:before {
			content: '';
			position: absolute;
			width: 100%;
			height: 100%;
			border-radius: inherit;
			border: 2px dashed transparent;
			border-right: 2px dashed hsl(var(--si-background));
			box-sizing: border-box;
			transition: all 0.25s ease;
			display: block;
			box-shadow: 0px 0px 0px 0px hsl(var(--si-color));
			animation: loadingTooltip 0.6s linear infinite;
		}
	}
}

@keyframes loadingTooltip {
	0% {
		transform: rotate(0);
	}
	100% {
		transform: rotate(360deg);
	}
} ;