.tooltip {
	position: relative;
}

.tooltip .tooltip-button {
	display: flex;
	align-items: center;
	justify-content: center;
}

.tooltip .tooltip-button:hover + .tooltip-bubble-container {
	display: flex;
}

.tooltip .tooltip-bubble-container {
	display: none;
	justify-content: center;
	position: absolute;
	z-index: 100;
	width: 230px;
	left: 50%;
	transform: translateX(-50%);
	bottom: 2rem;
}

.tooltip .tooltip-bubble {
	background-color: var(--color-white);
	color: var(--text-color-gray);
	box-shadow: 0px 2px 7px 0px #0000001f;
	font-size: 0.75rem;
	border-radius: 0.25rem;
	padding: 0.75rem;
	width: 100%;
}

.tooltip .tooltip-bubble-container::after {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='16' viewBox='0 0 21 16' fill='none'%3E%3Cpath d='M12.3397 15C11.5699 16.3333 9.64544 16.3333 8.87564 15L0.215393 0L21 0L12.3397 15Z' fill='white'/%3E%3C/svg%3E");
	position: absolute;
	height: 1rem;
	bottom: -1rem;
}