@tailwind utilities;

@layer utilities {
	.scrollbar-hide {
		-ms-overflow-style: none; /* IE and Edge */
		scrollbar-width: none; /* Firefox */
	}

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

	.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: theme(colors.gray.300);
			cursor: pointer;
		}

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

	.burst-no-marker::-webkit-details-marker {
		display: none;
	}

	.burst-no-marker::marker {
		display: none;
	}

	.burst-completed,
	.burst-success {
		@apply bg-green text-white;
	}

	.burst-open {
		@apply bg-yellow;
	}

	.burst-error {
		@apply bg-red text-white;
	}

	.burst-sale{
		@apply bg-orange text-white;
	}

	.burst-warning {
		@apply bg-red text-white;
	}

	.burst-new{
		@apply bg-blue text-white;
	}

	.burst-pro {
		@apply bg-green text-white;
	}

	&.burst-loading{
		@apply bg-white text-white;
		background-color: var(--rsp-white);
	}

	/* Used in License block */
	&.burst-skeleton{
		@apply bg-gray-400 text-white;
	}

	/* Live Traffic Animations */
	@keyframes fadeInDown {
		from {
			opacity: 0;
			transform: translateY(-10px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@keyframes fadeOutUp {
		from {
			opacity: 1;
			transform: translateY(0);
			max-height: 60px;
			margin-bottom: 12px;
		}
		to {
			opacity: 0;
			transform: translateY(-10px);
			max-height: 0;
			margin-bottom: 0;
		}
	}

	.animate-fade-in-down {
		animation: fadeInDown 0.4s ease-out;
	}

	.animate-fade-out-up {
		animation: fadeOutUp 0.3s ease-in forwards;
	}

	/* Smooth transitions for list items - this creates natural push-down effect */
	.live-traffic-item {
		transition: all 0.3s ease-out;
	}
}