.root {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 20px;
	width: 100%;
	height: 100%;
	pointer-events: none;

	&.fullscreen {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw !important;
		height: 100vh !important;
		z-index: 9999;
		background-color: variables.$bg-default;
	}

	&.block {
		width: 100%;
		height: 100%;
	}

	@include breakpoints.respond-to(breakpoints.$mobileMax) {
		width: 100%;
		height: 100%;
	}
}

.dots {
	display: flex;
	align-items: center;
	gap: 6px;
}

.dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: variables.$color-primary;
}

.description {
	@include typography.font-display;
	color: variables.$text-primary;
	text-align: center;
}
