@import "tailwindcss";

@layer components {
    .fancy-slider {
        @apply bg-gray-700 rounded-lg appearance-none cursor-pointer 
            [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3 
            [&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:bg-white 
            [&::-webkit-slider-thumb]:rounded-full
            hover:[&::-webkit-slider-thumb]:bg-violet-300;
    }

    .qc-highlighted {
        @apply shadow-[inset_0_0_35px_rgba(147,51,234,0.8)];
    }
}