@utility loading {
	animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
	user-select: none;
	border-radius: 0.125rem;
	background-color: hsl(var(--foreground) / 0.1);
	color: transparent;
	content-visibility: auto;

	& * {
		visibility: hidden;
		color: transparent;
	}
}

@utility loading-box {
	animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
	user-select: none;
	border-radius: 0.125rem;
	color: transparent;
	box-shadow: 0 1px 2px 0 hsl(var(--foreground) / 0.6);
	content-visibility: auto;

	& * {
		visibility: hidden;
		color: transparent;
	}
}

@utility ellipsis {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@utility ellipsis-unset {
	overflow: unset;
	text-overflow: unset;
	white-space: unset;
}

@utility no-scrollbar {
	/* Hide scrollbar for Chrome, Safari, and Opera */
	&::-webkit-scrollbar {
		display: none;
	}

	/* Hide scrollbar for IE, Edge, and Firefox */
	-ms-overflow-style: none; /* IE and Edge */
	scrollbar-width: none; /* Firefox */
}

@utility main-layout {
	&:has(.landing-floating-header) {
		--orderCartRightOffset: 0px;
	}
}

@utility landing-floating-header {
	.main-layout:has(&) {
		--orderCartRightOffset: 0px;
	}
}
