@import 'tailwindcss/utilities' layer(utilities);

@utility scrollbar-hide {
	-ms-overflow-style: none; /* IE and Edge */
	scrollbar-width: none; /* Firefox */

	&::-webkit-scrollbar {
		display: none; /* Chrome, Safari, Opera*/
	}
}

@utility burst-scroll {
	/* Track */
	&::-webkit-scrollbar-track {
		border-radius: 10px;
		-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0);
		background-color: transparent;
	}

	/* Scrollbar */
	&::-webkit-scrollbar {
		width: 8px;
		background-color: var(--color-gray-300);
		cursor: pointer;
	}

	/* Thumb */
	&::-webkit-scrollbar-thumb {
		background-color: var(--color-gray-400);
		border-radius: 10px;
	}
}

@utility burst-no-marker {
	&::-webkit-details-marker {
		display: none;
	}

	&::marker {
		display: none;
	}
}

@utility animate-toast-enter {
	animation: toastEnter 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@utility animate-toast-exit {
	animation: toastExit 0.25s ease-in both;
}

#burst-statistics .burst-story-content-width > * {
	@apply max-w-[1200px] mx-auto px-8;
}

@media (max-width: 767px) {
	#burst-statistics .burst-story-content-width > * {
		padding-inline: 1rem;
	}
}

/* Reset WP admin sidebar compensations when rendering story/share page. */
#burst-statistics:has(.burst-story-page) {
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
}

@layer utilities {
	@keyframes toastEnter {
		from { opacity: 0; transform: translate3d(100%, 0, 0); }
		to   { opacity: 1; transform: translate3d(0, 0, 0); }
	}

	@keyframes toastExit {
		from { opacity: 1; transform: translate3d(0, 0, 0); }
		to   { opacity: 0; transform: translate3d(100%, 0, 0); }
	}
}