yx-react-template/src/course/interactions/guide-dialog/GuideDialog.module.css

@reference "tailwindcss";

.mask {
	@apply pointer-events-auto absolute inset-0 block h-full w-full border-0 p-0;
	animation: dialog-fade-in 220ms ease-out both;
}

.panelContainer {
	@apply pointer-events-auto absolute;
	animation: dialog-panel-in 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
	transition:
		left 260ms cubic-bezier(0.16, 1, 0.3, 1),
		top 260ms cubic-bezier(0.16, 1, 0.3, 1),
		transform 260ms cubic-bezier(0.16, 1, 0.3, 1),
		opacity 180ms ease;
	will-change: left, top, transform, opacity;
}

.panel {
	@apply pointer-events-auto absolute w-[520px] rounded-3xl bg-white p-6 text-gray-900 shadow-2xl;
	animation: dialog-panel-in 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
	transition:
		left 260ms cubic-bezier(0.16, 1, 0.3, 1),
		top 260ms cubic-bezier(0.16, 1, 0.3, 1),
		transform 260ms cubic-bezier(0.16, 1, 0.3, 1),
		opacity 180ms ease;
	will-change: left, top, transform, opacity;
}

.measurePanel {
	left: -9999px;
	top: -9999px;
	visibility: hidden;
	animation: none;
	pointer-events: none;
}

.character {
	@apply mb-4 flex items-center gap-3;
}

.avatar {
	@apply flex h-14 w-14 items-center justify-center rounded-full bg-blue-100 text-3xl;
}

.name {
	@apply text-sm font-semibold text-blue-600;
}

.title {
	@apply text-2xl font-bold;
}

.description {
	@apply mt-3 text-base leading-7 text-gray-600;
}

.options {
	@apply mt-5 grid gap-2;
}

.footer {
	@apply mt-6 flex items-center justify-between gap-3;
}

.counter {
	@apply text-xs text-gray-400;
}

.actions {
	@apply flex items-center gap-2;
}

@keyframes dialog-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes dialog-panel-in {
	from {
		opacity: 0;
		transform: translate3d(0, 12px, 0) scale(0.98);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0) scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.mask,
	.panel,
	.panelContainer {
		animation: none;
		transition: none;
	}
}