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

@layer base {
    .react-flow__node-default,
    .react-flow__node-input,
    .react-flow__node-output {
        @apply bg-background-light dark:bg-background-dark border-2 border-gray-300 dark:border-gray-700 shadow-lg rounded-xl;
    }

    .react-flow__handle {
        @apply w-3 h-3 bg-gray-400 dark:bg-gray-600 border-2 border-background-light dark:border-background-dark;
    }

    .react-flow__edge-path {
        stroke-dasharray: 5, 5;
        stroke: #9ca3af;
    }

    .dark .react-flow__edge-path {
        stroke: #4b5563;
    }

    .code-line:before {
        content: counter(line);
        counter-increment: line;
        @apply inline-block text-right pr-4 text-gray-500 w-8;
    }
}