@tailwind base;
@tailwind components;
@tailwind utilities;

body {
    @apply font-roboto;
}

.layer-item {
    @apply flex justify-between items-center p-2 border-b dark:border-gray-600;
}

.layer-item button {
    @apply px-2 py-1 text-sm rounded;
}

.up-btn {
    @apply bg-blue-500 text-white;
}

.down-btn {
    @apply bg-green-500 text-white;
}

.delete-btn {
    @apply bg-red-500 text-white;
}

#particleContainer {
    @apply absolute inset-0;
}

.slider {
    @apply appearance-none h-2 bg-gray-300 dark:bg-gray-600 rounded-full cursor-pointer;
}

.slider::-webkit-slider-thumb {
    @apply appearance-none w-4 h-4 bg-red-600 rounded-full cursor-pointer;
}

.slider::-moz-range-thumb {
    @apply w-4 h-4 bg-red-600 rounded-full cursor-pointer;
}

.slider::-ms-thumb {
    @apply w-4 h-4 bg-red-600 rounded-full cursor-pointer;
}

@media (max-width: 768px) {
    #controls {
        @apply hidden;
    }
    #controls.active {
        @apply block;
    }
}