/* app/assets/stylesheets/components/buttons.css */

/* Base button */
.btn {
  @apply inline-flex items-center justify-center gap-2 rounded-lg px-3 py-2
         text-sm font-medium text-center no-underline whitespace-nowrap align-middle
         border border-transparent cursor-pointer transition-all duration-200 ease-in-out
         select-none relative overflow-hidden min-w-[80px];

  &:hover { @apply -translate-y-0.5; }
  &:active { @apply translate-y-0; }
  &:focus { @apply outline-none ring-2 ring-blue-500/20; }
  &:disabled,
  &.disabled { @apply opacity-60 cursor-not-allowed; }
}

/* Sizes */
.btn-small { @apply px-2.5 py-1.5 text-xs min-w-[72px]; }
.btn-large { @apply px-6 py-3 text-base rounded-xl min-w-[100px]; }
.btn-ico { @apply min-w-0 p-2; }

/* Filled variants */
.btn-blue { @apply bg-blue-600 border-blue-600 text-white; }
.btn-blue:hover { @apply bg-blue-700 border-blue-700 shadow-lg shadow-blue-600/20; }

.btn-teal { @apply bg-teal-600 border-teal-600 text-white; }
.btn-teal:hover { @apply bg-teal-700 border-teal-700 shadow-lg shadow-teal-600/20; }

.btn-green { @apply bg-green-600 border-green-600 text-white; }
.btn-green:hover { @apply bg-green-700 border-green-700 shadow-lg shadow-green-600/20; }

.btn-gray { @apply bg-gray-600 border-gray-600 text-white; }
.btn-gray:hover { @apply bg-gray-700 border-gray-700 shadow-lg shadow-gray-600/20; }

.btn-yellow { @apply bg-yellow-500 border-yellow-500 text-white; }
.btn-yellow:hover { @apply bg-yellow-600 border-yellow-600 shadow-lg shadow-yellow-500/20; }

.btn-orange { @apply bg-orange-600 border-orange-600 text-white; }
.btn-orange:hover { @apply bg-orange-700 border-orange-700 shadow-lg shadow-orange-600/20; }

.btn-purple { @apply bg-purple-600 border-purple-600 text-white; }
.btn-purple:hover { @apply bg-purple-700 border-purple-700 shadow-lg shadow-purple-600/20; }

.btn-red { @apply bg-red-600 border-red-600 text-white; }
.btn-red:hover { @apply bg-red-700 border-red-700 shadow-lg shadow-red-600/20; }

.btn-white { @apply bg-white border-gray-300 text-gray-700 shadow-sm; }
.btn-white:hover { @apply bg-gray-50 shadow-md; }

/* Outline variants */
.btn-outline-blue { @apply border-blue-600 text-blue-600; }
.btn-outline-blue:hover { @apply bg-blue-600 text-white shadow-lg shadow-blue-600/20; }

.btn-outline-teal { @apply border-teal-600 text-teal-600; }
.btn-outline-teal:hover { @apply bg-teal-600 text-white shadow-lg shadow-teal-600/20; }

.btn-outline-green { @apply border-green-600 text-green-600; }
.btn-outline-green:hover { @apply bg-green-600 text-white shadow-lg shadow-green-600/20; }

.btn-outline-gray { @apply border-gray-600 text-gray-600; }
.btn-outline-gray:hover { @apply bg-gray-600 text-white shadow-lg shadow-gray-600/20; }

.btn-outline-yellow { @apply border-yellow-500 text-yellow-600; }
.btn-outline-yellow:hover { @apply bg-yellow-500 text-white shadow-lg shadow-yellow-500/20; }

.btn-outline-orange { @apply border-orange-600 text-orange-600; }
.btn-outline-orange:hover { @apply bg-orange-600 text-white shadow-lg shadow-orange-600/20; }

.btn-outline-purple { @apply border-purple-600 text-purple-600; }
.btn-outline-purple:hover { @apply bg-purple-600 text-white shadow-lg shadow-purple-600/20; }

.btn-outline-red { @apply border-red-600 text-red-600; }
.btn-outline-red:hover { @apply bg-red-600 text-white shadow-lg shadow-red-600/20; }

.btn-outline-white { @apply border-gray-300 text-gray-700 bg-white; }
.btn-outline-white:hover { @apply bg-gray-50 shadow-md; }