.introjs-arrow {

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

.introjs-skipbutton {
	font-weight: 400;
	font-size: 24px;
}

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

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

.introjs-disabled {
	pointer-events: none;
	opacity: 0.4;
}

.introjs-tooltipbuttons {
	@apply mt-2 border-border;
}

.introjs-tooltip {
	@apply bg-background text-foreground;
	min-width: 320px;
	border: none;
	border-radius: 4px;
	box-shadow: 0 15px 55px hsl(0 0% 0% / 5%);
}

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