@layer components {
  .btn {
    @apply inline-flex items-center rounded-md border px-4 py-2 text-sm font-medium;
    @apply focus:outline-none focus:ring-2 focus:ring-primary-500;
    @apply disabled:cursor-not-allowed disabled:opacity-50;
  }

  .btn.btn-white {
    @apply border-gray-900/10 bg-white text-sm font-medium text-gray-700;
    @apply hover:bg-gray-50;
  }

  .btn.btn-gray {
    @apply border-transparent bg-gray-100 text-white;
    @apply hover:bg-gray-200;
  }

  .btn.btn-black {
    @apply border-transparent bg-gray-800 text-white;
    @apply hover:bg-gray-700;
  }

  .btn.btn-transparent {
    @apply border-transparent bg-transparent text-gray-700 shadow-none;
  }

  .btn.btn-primary {
    @apply border-transparent bg-primary-600 text-white;
    @apply hover:bg-primary-700;
  }

  .btn.btn-blue {
    @apply border-transparent bg-blue-600 text-white;
    @apply hover:bg-blue-700;
  }

  .btn.btn-green {
    @apply border-transparent bg-green-600 text-white;
    @apply hover:bg-green-700;
  }

  .btn.btn-red {
    @apply border-transparent bg-red-600 text-white;
    @apply hover:bg-red-700;
  }

  .btn.btn-outline-white {
    @apply border-white bg-transparent text-white;
    @apply hover:bg-gray-50 hover:bg-opacity-20;
  }

  .btn.btn-outline-primary {
    @apply border-primary-500 bg-transparent text-primary-600;
    @apply hover:bg-white;
  }

  .btn.btn-outline-blue {
    @apply border-blue-500 bg-transparent text-blue-600;
    @apply hover:bg-white;
  }

  .btn.btn-outline-green {
    @apply border-green-500 bg-transparent text-green-600;
    @apply hover:bg-white;
  }

  .btn.btn-outline-red {
    @apply border-red-500 bg-transparent text-red-600;
    @apply hover:bg-white;
  }

  .btn.btn-outline-black {
    @apply border-gray-700 bg-transparent text-gray-800;
    @apply hover:bg-white;
  }
}