.introjs-arrow {
	border-width: 7px;

	&.top {
		@apply border-b-background;
		top: -14px;
		left: 14px;
	}
	&.right {
		@apply border-l-background;
		top: 14px;
		right: -14px;
	}
	&.bottom {
		@apply border-t-background;
		bottom: -14px;
		left: 14px;
	}
	&.left {
		@apply border-r-background;
		top: 14px;
		left: -14px;
	}
}

.introjsFloatingElement {
	@apply fixed;
}

.introjs-skipbutton {
	@apply absolute left-auto right-auto -end-3 -top-3  ms-auto inline-flex size-8 items-center justify-center rounded-full bg-background bg-center bg-no-repeat text-2xl font-normal leading-none text-heading-foreground shadow-lg transition-all hover:scale-105 hover:bg-red-500 hover:text-white;
	background-image: url('data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9IiMwMDAwMDAiCiAgc3Ryb2tlLXdpZHRoPSIyIgogIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIKICBzdHJva2UtbGluZWpvaW49InJvdW5kIgo+CiAgPHBhdGggZD0iTTE4IDZsLTEyIDEyIiAvPgogIDxwYXRoIGQ9Ik02IDZsMTIgMTIiIC8+Cjwvc3ZnPg==');
	background-size: 18px;

	&:hover {
		background-image: url('data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9IiNmZmZmZmYiCiAgc3Ryb2tlLXdpZHRoPSIyIgogIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIKICBzdHJva2UtbGluZWpvaW49InJvdW5kIgo+CiAgPHBhdGggZD0iTTE4IDZsLTEyIDEyIiAvPgogIDxwYXRoIGQ9Ik02IDZsMTIgMTIiIC8+Cjwvc3ZnPg==');
	}
}

.introjs-button {
	@apply bg-primary text-primary-foreground transition-colors border-none font-medium rounded-full
		hover:bg-primary hover:text-primary-foreground
		focus:bg-primary focus:text-primary-foreground focus:border-none focus:ring focus:ring-primary/20;
	text-shadow: none;

}
.introjs-disabled {
	@apply bg-heading-foreground text-header-background;
}

.introjs-prevbutton {
	@apply bg-transparent underline text-heading-foreground ms-auto;

	&.introjs-hidden {

		~ .introjs-nextbutton {
			@apply ms-auto
		}
	}
}

.introjs-disabled {
	@apply pointer-events-none opacity-40;
}

.introjs-tooltipbuttons {
	@apply flex gap-4 p-0 mt-4 border-none after:content-none;
}

.introjs-tooltip-header {
	@apply flex gap-1 justify-between p-0 min-h-0 static;

	h1 {
		@apply text-xl/[1.1em] font-bold mb-3 empty:hidden min-h-0;
	}
	&:has(h1:empty) {
		@apply mb-3;
	}
}

.introjs-tooltiptext {
	@apply p-0 text-base/6;
	overflow-wrap: anywhere;

	img {
		@apply mb-7 rounded-md w-full h-auto;
	}
	h1 {
		@apply text-xl/[1.1em] font-bold mb-3;
	}
}


.introjs-tooltip {
	@apply bg-background text-foreground shadow-[0_4px_42px_hsl(var(--background)/40%)] rounded-lg min-w-[420px] border-none p-5;
	background-image: url(@themeAssets/default/assets/img/bg/blob-1.png);
	background-size: 410px;
	background-position: 0% calc(100% + 25px);
	background-repeat: no-repeat;

	&:has(.introjs-tooltiptext img, .introjs-tooltiptext h1) .introjs-tooltip-header {
		@apply mb-0;
	}
}

.introjs-tooltipReferenceLayer {

	* {
		font-family: inherit;
	}
}

.theme-dark {

	.introjs-helperLayer {
		box-shadow:
			rgba(255, 255, 255, 0.8) 0px 0px 1px 2px,
			rgba(0, 0, 0, 0.5) 0px 0px 0px 50000px !important;
	}

	.introjs-skipbutton {
		background-image: url('data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9IiNmZmZmZmYiCiAgc3Ryb2tlLXdpZHRoPSIyIgogIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIKICBzdHJva2UtbGluZWpvaW49InJvdW5kIgo+CiAgPHBhdGggZD0iTTE4IDZsLTEyIDEyIiAvPgogIDxwYXRoIGQ9Ik02IDZsMTIgMTIiIC8+Cjwvc3ZnPg==');
	}
}