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

@layer components {
  .btn-retro     { @apply border-2 border-black px-3 py-1 font-medium shadow-retro-sm text-sm; }
  .btn-primary   { @apply btn-retro bg-teal-500 text-black hover:bg-teal-400; }
  .btn-secondary { @apply btn-retro bg-white text-black hover:bg-gray-100; }
  .btn-danger    { @apply btn-retro bg-red-500 text-white hover:bg-red-400; }
  .btn-admin     { @apply btn-retro bg-orange-400 text-black hover:bg-orange-300; }
  .panel         { @apply bg-gray-100 border-4 border-black shadow-retro; }
  .panel-header  { @apply text-black px-4 py-3 font-bold text-sm tracking-widest border-b-4 border-black uppercase; }
  .panel-header-teal  { @apply panel-header bg-teal-400; }
  .panel-header-admin { @apply panel-header bg-orange-400; }
  .input-retro   { @apply w-full border-2 border-black px-2 py-1.5 text-sm; }
  .bg-checkerboard {
    background-image:
      linear-gradient(45deg, #d1d5db 25%, transparent 25%),
      linear-gradient(-45deg, #d1d5db 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, #d1d5db 75%),
      linear-gradient(-45deg, transparent 75%, #d1d5db 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  }
}