.tooltip {
	cursor: pointer;
	position: relative;
	width: max-content;
	display: grid;
	place-content: center;

	&:hover {
		.tooltip__text {
			opacity: 1;
		}
	}

	&__text {
		z-index: 10;
		opacity: 0;
		pointer-events: none;
		position: absolute;
		top: calc(100% + 3px);
		left: 50%;
		transform: translateX(-50%);
		background-color: #11316B;
		padding: 10px;
		border-radius: 5px;
		font-size: 14px;
		font-weight: 500;
		line-height: 100%;

		&::before {
			content: "";
			position: absolute;
			width: 10px;
			height: 10px;
			background-color: #11316B;
			top: 0;
			left: 50%;
			transform: rotate(45deg) translateX(-50%);
		}

		[data-theme="light"] & {
			background-color: #D2E8FB;

			&::before {
				background-color: #D2E8FB;
			}
		}
	}
}