/* Button Components
 * Pure BEM convention: base blocks + modifiers
 * Using Tailwind v4 @utility with @layer components
 */

/* Regular Button Block */
@utility btn {
  @layer components {
    @apply font-medium rounded-lg transition duration-200 text-center inline-block py-3 px-4;
  }
}

@utility btn--primary {
  @layer components {
    @apply bg-blue-600 hover:bg-blue-700 text-white;
  }
}

@utility btn--secondary {
  @layer components {
    @apply bg-gray-600 hover:bg-gray-700 text-white;
  }
}

@utility btn--danger {
  @layer components {
    @apply bg-red-600 hover:bg-red-700 text-white;
  }
}

@utility btn--sm {
  @layer components {
    @apply text-xs py-1.5 px-3;
  }
}

/* Icon Button Block */
@utility btn-icon {
  @layer components {
    @apply flex items-center justify-center w-10 h-10 rounded-full transition-colors duration-200 bg-gray-100 hover:bg-gray-200;
  }
}

@utility btn-icon--primary {
  @layer components {
    @apply bg-blue-100 hover:bg-blue-200;
  }
}

/* Link Button Block */
@utility btn-link {
  @layer components {
    @apply text-sm bg-transparent border-none p-0 cursor-pointer text-blue-600 hover:text-blue-800;
  }
}

@utility btn-link--danger {
  @layer components {
    @apply text-red-600 hover:text-red-800;
  }
}