/**
 * The following styles get applied both on the front of your site
 * and in the editor.
 *
 * Replace them with your own styles or remove the file completely.
 */

.homegrade-blocks-focused-schema {
	figure {
		position: relative;
	}

	figcaption {
		ol {
			padding-top: 20px;
			counter-reset: myOrderedListItemsCounter;

			li {
				list-style-type: none;
				position: relative;
				padding: 8px;
				padding-left: 50px;
			}
			li:before {
				content: "";
				left: 0;
				top: 0;
				transform: translateY(3px);
				position: absolute;
				width: 30px;
				height: 30px;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: red;
				color: white;
				border-radius: 50%;
				counter-increment: myOrderedListItemsCounter;
				content: counter(myOrderedListItemsCounter);
				margin-right: 0.5em;
				font-weight: 700;
			}
		}
	}
}

.homegrade-blocks-focus-point-bullet {
	position: absolute !important;
	border-radius: 50%;
	transition: scale 0.2s ease-in-out;
	z-index: 10;
	&__index {
		font-weight: 700;
		width: 20px;
		height: 20px;
		top: 0;
		left: 0;
		position: relative;
		color: white;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 16px;
	}

	&__tooltip-container {
		background-color: white;
		opacity: 0.9999;
		border-radius: 14px;
		padding: 10px;
		position: absolute;
		top: -4px;
		left: 50%;
		transform: translate(-50%, -100%);
		width: max-content;
		min-width: 70px;
		max-width: 420px;
		text-align: center;
		display: none;
		justify-content: center;
		align-items: center;
		box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
		z-index: 999;

		&:after {
			content: "";
			display: block;
			background-color: white;
			position: absolute;
			top: 100%;
			left: 50%;
			width: 10px;
			height: 10px;
			transform: translate(-50%, -50%) rotate(45deg);
			box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.04);
			z-index: 999;
		}
		&__title {
			width: auto;
			min-width: 100px;
		}
	}
}
.homegrade-blocks-focus-point-bullet:hover {
	scale: 1.2;
	filter: brightness(1.2) hue-rotate(10deg);

	.homegrade-blocks-focus-point-bullet__tooltip-container {
		display: flex;
	}
}

//***** TOOLTIP

.tooltip-title {
	font-weight: bold;
	margin-right: 6px;
}