@import "tailwindcss";
@import "./scene.css";

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

@theme {
    --font-sans: "Instrument Sans", ui-sans-serif, system-ui, sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
        "Noto Color Emoji";
}

:root {
    --primary-color: #ff9f43;
}

@layer components {
    .custom-container {
        @apply max-w-7xl 2xl:max-w-[1536px] mx-auto px-4 sm:px-6 lg:px-8;
    }

    .section-gap {
        @apply py-10;
    }

    .control-panel {
        @apply bg-gray-800 py-1 px-2 lg:py-2 rounded-md text-white flex flex-col gap-1 select-none;
    }
    .control-row {
        @apply flex items-center justify-between gap-2;
    }
    .control-btn {
        @apply bg-black text-white w-5 h-5 lg:w-7 lg:h-7 rounded-full hover:bg-black/70 transition-all duration-300 flex items-center justify-center font-bold flex-shrink-0 select-none cursor-pointer;
    }
    .control-input {
        @apply w-10 lg:w-16 text-center bg-gray-700 rounded-md px-1;
    }
    .control-input::-webkit-outer-spin-button,
    .control-input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    .control-input {
        -moz-appearance: textfield;
    }

    .control-btn-sm {
        @apply px-2 py-0.5 text-xs lg:text-sm rounded-sm transition-colors duration-200;
    }

    .active-btn {
        @apply bg-white text-black;
    }

    .inactive-btn {
        @apply bg-gray-500/50 text-white hover:bg-gray-500/80;
    }
}