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


@layer components {
  .btn-primary {
    @apply inline-block px-3 py-1 rounded-md text-white bg-blue-500 hover:bg-blue-700;
  }

  .btn-primary-sm {
    @apply inline-block px-2 py-1 rounded-md text-sm text-white bg-blue-500 hover:bg-blue-700;
  }

  .btn-gray {
    @apply inline-block px-3 py-1 rounded-md text-white bg-gray-500 hover:bg-gray-600;
  }

  .btn-gray-sm {
    @apply inline-block px-2 py-1 rounded-md text-sm text-white bg-gray-500 hover:bg-gray-600;
  }

  .input-primary {
    @apply border border-gray-300 rounded p-1 focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500;
  }

  .btn-identity-custom {
    @apply border border-blue-700 rounded py-1 px-2 text-blue-700 hover:bg-blue-700 hover:text-white
  }

  .custom-prose {
    @apply prose lg:prose-lg prose-neutral prose-pre:text-black prose-pre:bg-gray-100 prose-a:text-blue-600
    max-w-none prose-pre:my-0 prose-blockquote:my-0 prose-h1:my-0 prose-figure:my-0 prose-h1:text-xl
    prose-figure:justify-items-center
  }
}

@layer utilities {
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}