/**
 * Button component classes.
 *
 * Inside @layer components so Tailwind utilities always take precedence.
 * All selectors scoped under .wse-app.
 *
 * @since 5.8.1
 */

@layer components {
  .wse-app .wse-btn-block {
    @apply flex w-full;
  }

  /* ── Dashed / add-new ─────────────────────────────────────────────────── */
  .wse-app .wse-dashed-btn {
    @apply flex items-center justify-center gap-1.5
           w-full py-[9px] px-0
           border border-dashed border-gray-300 rounded-[7px]
           bg-transparent text-gray-500 text-[13px] font-medium
           no-underline cursor-pointer
           transition-all hover:border-gray-500 hover:text-gray-700;
  }

  /* ── Outline ──────────────────────────────────────────────────────────── */
  .wse-app .wse-outline-btn {
    @apply inline-flex items-center justify-center
           py-2 px-[22px]
           border border-gray-300 rounded-[7px]
           bg-transparent text-gray-700 text-[13px] font-medium
           no-underline cursor-pointer
           transition-all hover:border-gray-400 hover:text-gray-900;
  }

  /* ── Help / secondary ─────────────────────────────────────────────────── */
  .wse-app .wse-help-btn {
    @apply inline-flex items-center gap-[5px]
           py-1.5 px-3
           border border-gray-200 rounded-[7px]
           bg-white text-gray-700 text-[13px] font-medium
           no-underline flex-shrink-0
           transition-colors hover:border-gray-300 hover:text-gray-900;
  }
}