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

@layer components {
    .item-hover {
        @apply p-3 cursor-pointer hover:bg-neutral-300 dark:hover:bg-neutral-700 transition-all;
    }

    .item {
        @apply p-3;
    }

    .container {
        @apply bg-neutral-200 dark:bg-neutral-800 dark:text-gray-300 text-gray-900 shadow rounded;
    }

    .btn {
        @apply bg-primary hover:bg-orange-700 text-gray-900 font-bold px-3 py-1 shadow rounded transition-all hover:cursor-pointer disabled:opacity-50 disabled:hover:cursor-not-allowed;
    }

    .divider {
        @apply w-full h-1 bg-neutral-250 dark:bg-neutral-850;
    }

    .checkbox {
        @apply h-4 w-4 text-primary rounded dark:bg-neutral-700 bg-neutral-300 hover:cursor-pointer focus:ring-transparent focus:ring-offset-0 border-none
    }

    .input {
        @apply bg-neutral-200 dark:bg-neutral-800 dark:text-gray-300 text-gray-900 shadow rounded border-none focus:ring-primary
    }

    .text-default {
        @apply dark:text-gray-300 text-gray-900
    }
  }