.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;
}

.shepherd-cancel-icon,
.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==');
	}

	span {
		@apply hidden;
	}
}

.shepherd-button,
.introjs-button {
	@apply bg-primary text-primary-foreground transition-colors border-none font-medium rounded-full m-0;
	text-shadow: none;

	&:not(:disabled) {
		@apply hover:bg-primary/80 hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground focus:border-none focus:ring focus:ring-primary/20;
	}
}
.introjs-disabled {
	@apply bg-heading-foreground text-header-background;
}

.shepherd-btn-back,
.introjs-prevbutton {
	@apply bg-transparent underline text-heading-foreground ms-auto p-0;

	&:not(:disabled) {
		@apply hover:bg-transparent hover:text-primary focus:ring-0 focus:bg-transparent focus:text-primary;
	}
	&.introjs-hidden {

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

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

.shepherd-footer,
.introjs-tooltipbuttons {
	@apply flex items-center 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;
	}
}

.shepherd-text,
.introjs-tooltiptext {
	@apply p-0 text-base/[1.5em];
	overflow-wrap: anywhere;

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

.shepherd-element,
.introjs-tooltip {
	@apply bg-background text-foreground shadow-[0_4px_42px_hsl(var(--background)/40%)] rounded-lg min-w-[420px] border-none p-5 before:-inset-0 before:absolute before:z-0 before:pointer-events-none;

	&:before {
		background-image: url(@themeAssets/default/assets/img/bg/blob-1.png);
		background-size: 410px;
		background-position: -5% calc(100% + 60px);
		background-repeat: no-repeat;
	}

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

.shepherd-arrow {
	@apply size-3.5 before:size-3.5;
}

.shepherd-element {
	@apply transition-all ease-linear;

	&[data-popper-placement^=bottom] {
		@apply before:-top-1.5;

		.shepherd-arrow {
			@apply -top-1.5 before:rounded-tl-[3px];
		}
	}
	&[data-popper-placement^=top] {

		.shepherd-arrow {
			@apply -bottom-1.5 before:rounded-br-[3px];
		}
	}
	&[data-popper-placement^=right] {

		.shepherd-arrow {
			@apply -left-1.5 before:rounded-bl-[3px];
		}
	}
	&[data-popper-placement^=left] {

		.shepherd-arrow {
			@apply -right-1.5 before:rounded-tr-[3px];
		}
	}
}

.introjs-tooltipReferenceLayer {

	* {
		font-family: inherit;
	}
}

.shepherd-header {
	@apply p-0;
}

.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;
	}

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