@getmicdrop/svelte-components 3.0.0 → 4.0.0

package/dist/components/Button/Button.svelte

@@ -1,820 +0,0 @@
-<script lang="ts">
-  /**
-   * Button Component with Optional Microinteractions
-   *
-   * Props:
-   * @prop {boolean} responsive - Enable lift/press microinteraction for snappy feel
-   *   Desktop: Button lifts 2px on hover, returns on press
-   *   Mobile: Button scales to 98% on tap
-   *   Recommended for: Primary actions, CTAs, important interactive buttons
-   *   Skip for: Buttons in lists, text buttons, subtle inline actions
-   */
-  import { classNames } from '../../utils/utils.js';
-  import type { Snippet } from 'svelte';
-  import type { HTMLButtonAttributes, HTMLAnchorAttributes } from 'svelte/elements';
-
-  type Variant = 'blue-solid' | 'blue-outline' | 'gray-outline' | 'red-solid' | 'red-outline' | 'red-text' | 'gray-text' | 'icon' | 'toggle';
-  type Size = '' | 'full' | 'full-md-auto' | 'lg' | 'md' | 'sm' | 'xs' | 'nav' | 'half';
-  type MinWidth = '' | 'sm' | 'action' | 'modal' | 'modal-responsive';
-  type Shape = '' | 'circle';
-  type Justify = '' | 'between';
-
-  interface Props {
-    variant?: Variant;
-    size?: Size;
-    minWidth?: MinWidth;
-    shape?: Shape;
-    disabled?: boolean;
-    loading?: boolean;
-    success?: boolean;
-    successText?: string;
-    className?: string;
-    beforeIcon?: string | null;
-    afterIcon?: string | null;
-    responsive?: boolean;
-    active?: boolean;
-    href?: string | null;
-    justify?: Justify;
-    /** Click event callback */
-    onclick?: (e: MouseEvent) => void;
-    /** Mouseover event callback */
-    onmouseover?: (e: MouseEvent) => void;
-    /** Mouseenter event callback */
-    onmouseenter?: (e: MouseEvent) => void;
-    /** Mouseleave event callback */
-    onmouseleave?: (e: MouseEvent) => void;
-    /** Slot content */
-    children?: Snippet;
-    /** Rest props for additional attributes */
-    [key: string]: unknown;
-  }
-
-  let {
-    variant = 'blue-solid',
-    size = '',
-    minWidth = '',
-    shape = '',
-    disabled = false,
-    loading = false,
-    success = false,
-    successText = '',
-    className = '',
-    beforeIcon = null,
-    afterIcon = null,
-    responsive = false,
-    active = false,
-    href = null,
-    justify = '',
-    onclick,
-    onmouseover,
-    onmouseenter,
-    onmouseleave,
-    children,
-    ...restProps
-  }: Props = $props();
-
-  // Determine effective disabled state (disabled when loading or success)
-  let effectiveDisabled = $derived(disabled || loading || success);
-
-  // Size classes
-  let sizeClass = $derived((() => {
-    // Icon variant uses different sizing
-    if (variant === 'icon') {
-      switch (size) {
-        case 'lg':
-          return 'p-3 min-h-0';
-        case 'md':
-          return 'p-2.5 min-h-0';
-        case 'sm':
-          return 'p-2 min-h-0';
-        case 'xs':
-          return 'p-1.5 min-h-0';
-        default:
-          return 'p-2 min-h-0'; // Default to sm for icon buttons
-      }
-    }
-
-    switch (size) {
-      case 'full':
-        return 'w-full';
-      case 'full-md-auto':
-        return 'w-full md:w-auto'; // Full on mobile, auto on desktop (use with minWidth)
-      case 'half':
-        return 'w-[48%] md:w-auto'; // For modal button pairs
-      case 'lg':
-        return 'px-6 py-3 text-base';
-      case 'md':
-        return 'px-3 sm:px-4 py-3 sm:py-3.5 text-lg';
-      case 'sm':
-        return 'px-2.5 sm:px-3 py-1 min-h-[40px] leading-4 rounded-md text-xs';
-      case 'xs':
-        return 'px-2.5 py-1.5 text-xs rounded';
-      case 'nav':
-        return '!min-h-0 !px-3 !py-2.5 w-full !justify-start !text-base';
-      default:
-        return '';
-    }
-  })());
-
-  // Min width classes
-  let minWidthClass = $derived((() => {
-    switch (minWidth) {
-      case 'sm':
-        return 'min-w-[100px]'; // Small inline buttons (Update, Set up)
-      case 'action':
-        return 'min-w-[150px]'; // Form action buttons (Save, Cancel)
-      case 'modal':
-        return 'min-w-[130px] md:min-w-[130px]'; // Modal footer buttons
-      case 'modal-responsive':
-        return 'min-w-[155px] md:min-w-[130px]'; // Modal buttons with mobile sizing
-      default:
-        return '';
-    }
-  })());
-
-  // Shape classes
-  let shapeClass = $derived((() => {
-    switch (shape) {
-      case 'circle':
-        return '!rounded-full !w-8 !h-8 !min-h-[32px] !p-0';
-      default:
-        return '';
-    }
-  })());
-
-  // Variant classes with consistent hover/active states
-  let variantClass = $derived((() => {
-    if (success) return 'btn-success';
-
-    switch (variant) {
-      case 'blue-solid':
-        return 'btn-blue-solid';
-      case 'blue-outline':
-        return 'btn-blue-outline';
-      case 'gray-outline':
-        return 'btn-gray-outline';
-      case 'red-solid':
-        return 'btn-red-solid';
-      case 'red-outline':
-        return 'btn-red-outline';
-      case 'red-text':
-        return 'btn-red-text';
-      case 'gray-text':
-        return 'btn-gray-text';
-      case 'icon':
-        return 'btn-icon';
-      case 'toggle':
-        return 'btn-toggle';
-      default:
-        return 'btn-blue-solid';
-    }
-  })());
-
-  // Text color class
-  let textClass = $derived((() => {
-    if (success) return 'text-white';
-
-    switch (variant) {
-      case 'blue-solid':
-      case 'red-solid':
-        return 'text-white';
-      case 'blue-outline':
-        return 'text-primary-700';
-      case 'gray-outline':
-        return 'text-gray-800';
-      case 'red-outline':
-      case 'red-text':
-        return 'text-red-600';
-      case 'gray-text':
-        return 'text-Text-Tartiary';
-      case 'icon':
-        return ''; // Icon buttons inherit text color from className or use default gray
-      case 'toggle':
-        return ''; // Handled by toggle variant states
-      default:
-        return 'text-white';
-    }
-  })());
-
-  let disabledClass = $derived(disabled && !loading && !success ? 'btn-disabled cursor-not-allowed' : '');
-
-  // Justify class for list-item style buttons
-  let justifyClass = $derived(justify === 'between' ? '!justify-between' : '');
-
-  let buttonClasses = $derived(classNames(
-    'cursor-pointer px-2.5 sm:px-3 py-3 min-h-[40px]',
-    'inline-flex items-center justify-center',
-    'rounded-lg',
-    'focus:outline-none focus:ring-0',
-    'font-medium text-sm leading-none',
-    'btn-transition',
-    href ? 'no-underline hover:no-underline' : '',
-    sizeClass,
-    minWidthClass,
-    shapeClass,
-    variantClass,
-    textClass,
-    disabledClass,
-    responsive && !disabled ? 'btn-responsive' : '',
-    active && (variant === 'gray-text' || variant === 'toggle') ? 'btn-active' : '',
-    justifyClass,
-    className
-  ));
-</script>
-
-<!-- svelte-ignore a11y_mouse_events_have_key_events -->
-{#if href}
-  <a
-    {href}
-    class={buttonClasses}
-    onclick={onclick}
-    onmouseover={onmouseover}
-    onmouseenter={onmouseenter}
-    onmouseleave={onmouseleave}
-    {...restProps}
-  >
-    <span class="btn-inner" class:btn-inner-hidden={loading || success}>
-      {#if beforeIcon}
-        <img src={beforeIcon} alt="" class="mr-2" />
-      {/if}
-      <span class="btn-content">{#if children}{@render children()}{/if}</span>
-      {#if afterIcon}
-        <img src={afterIcon} alt="" class="ml-2" />
-      {/if}
-    </span>
-  </a>
-{:else}
-  <button
-    class={buttonClasses}
-    disabled={effectiveDisabled}
-    onclick={onclick}
-    onmouseover={onmouseover}
-    onmouseenter={onmouseenter}
-    onmouseleave={onmouseleave}
-    {...restProps}
-  >
-    <!-- Container maintains button width -->
-    <span class="btn-inner" class:btn-inner-hidden={loading || success}>
-      {#if beforeIcon}
-        <img src={beforeIcon} alt="" class="mr-2" />
-      {/if}
-      <span class="btn-content">{#if children}{@render children()}{/if}</span>
-      {#if afterIcon}
-        <img src={afterIcon} alt="" class="ml-2" />
-      {/if}
-    </span>
-
-    <!-- Spinner/checkmark overlay -->
-    {#if loading}
-      <span class="btn-overlay">
-        <span class="btn-spinner"></span>
-      </span>
-    {:else if success}
-      <span class="btn-overlay">
-        <svg class="btn-checkmark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
-          <polyline class="checkmark-path" points="4 12 9 17 20 6"></polyline>
-        </svg>
-        {#if successText}
-          <span class="btn-success-text">{successText}</span>
-        {/if}
-      </span>
-    {/if}
-  </button>
-{/if}
-
-<style>
-  /* ============================================
-     TRANSITION
-     ============================================ */
-  .btn-transition {
-    position: relative;
-    transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out;
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-         user-select: none;
-    touch-action: manipulation;
-  }
-
-  /* ============================================
-     BLUE SOLID
-     Default primary button
-     ============================================ */
-  .btn-blue-solid {
-    border-width: 1px;
-    --tw-border-opacity: 1;
-    border-color: rgb(29 78 216 / var(--tw-border-opacity, 1));
-    --tw-bg-opacity: 1;
-    background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
-}
-  .btn-blue-solid:hover:not(:disabled) {
-    --tw-border-opacity: 1;
-    border-color: rgb(30 64 175 / var(--tw-border-opacity, 1));
-    --tw-bg-opacity: 1;
-    background-color: rgb(30 64 175 / var(--tw-bg-opacity, 1));
-}
-  .btn-blue-solid:active:not(:disabled) {
-    --tw-border-opacity: 1;
-    border-color: rgb(30 58 138 / var(--tw-border-opacity, 1));
-    --tw-bg-opacity: 1;
-    background-color: rgb(30 58 138 / var(--tw-bg-opacity, 1));
-}
-
-  /* ============================================
-     BLUE OUTLINE
-     Secondary action with blue accent
-     ============================================ */
-  .btn-blue-outline {
-    border-width: 1px;
-    --tw-border-opacity: 1;
-    border-color: rgb(29 78 216 / var(--tw-border-opacity, 1));
-    background-color: transparent;
-    color: #1d4ed8; /* blue-700 for light mode */
-}
-  .btn-blue-outline:hover:not(:disabled) {
-    --tw-bg-opacity: 1;
-    background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
-}
-  .btn-blue-outline:active:not(:disabled) {
-    --tw-bg-opacity: 1;
-    background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
-}
-
-  /* Dark mode overrides for blue outline button */
-  :global(.dark) .btn-blue-outline,
-  :global(.performer-portal.dark) .btn-blue-outline {
-    border-color: #3b82f6;
-    color: #3b82f6;
-  }
-  :global(.dark) .btn-blue-outline:hover,
-  :global(.performer-portal.dark) .btn-blue-outline:hover {
-    background-color: rgba(66, 133, 244, 0.15);
-  }
-  :global(.dark) .btn-blue-outline:active,
-  :global(.performer-portal.dark) .btn-blue-outline:active {
-    background-color: rgba(66, 133, 244, 0.25);
-  }
-
-  /* ============================================
-     GRAY OUTLINE
-     De-emphasized secondary action
-     ============================================ */
-  .btn-gray-outline {
-    border-width: 1px;
-    --tw-border-opacity: 1;
-    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
-    background-color: transparent;
-}
-  .btn-gray-outline:hover:not(:disabled) {
-    --tw-bg-opacity: 1;
-    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
-}
-  .btn-gray-outline:active:not(:disabled) {
-    --tw-bg-opacity: 1;
-    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
-}
-
-  /* Dark mode overrides for gray outline button */
-  :global(.dark) .btn-gray-outline,
-  :global(.performer-portal.dark) .btn-gray-outline {
-    border-color: #374151;
-    color: #f7f7f8;
-  }
-  :global(.dark) .btn-gray-outline:hover,
-  :global(.performer-portal.dark) .btn-gray-outline:hover {
-    background-color: #1f2937;
-  }
-  :global(.dark) .btn-gray-outline:active,
-  :global(.performer-portal.dark) .btn-gray-outline:active {
-    background-color: #374151;
-  }
-
-  /* ============================================
-     RED SOLID
-     Destructive primary action
-     ============================================ */
-  .btn-red-solid {
-    border-width: 1px;
-    --tw-border-opacity: 1;
-    border-color: rgb(185 28 28 / var(--tw-border-opacity, 1));
-    --tw-bg-opacity: 1;
-    background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
-}
-  .btn-red-solid:hover:not(:disabled) {
-    --tw-border-opacity: 1;
-    border-color: rgb(153 27 27 / var(--tw-border-opacity, 1));
-    --tw-bg-opacity: 1;
-    background-color: rgb(153 27 27 / var(--tw-bg-opacity, 1));
-}
-  .btn-red-solid:active:not(:disabled) {
-    --tw-border-opacity: 1;
-    border-color: rgb(127 29 29 / var(--tw-border-opacity, 1));
-    --tw-bg-opacity: 1;
-    background-color: rgb(127 29 29 / var(--tw-bg-opacity, 1));
-}
-
-  /* ============================================
-     RED OUTLINE
-     Destructive secondary action
-     ============================================ */
-  .btn-red-outline {
-    border-width: 1px;
-    --tw-border-opacity: 1;
-    border-color: rgb(220 38 38 / var(--tw-border-opacity, 1));
-    background-color: transparent;
-}
-  .btn-red-outline:hover:not(:disabled) {
-    --tw-bg-opacity: 1;
-    background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
-}
-  .btn-red-outline:active:not(:disabled) {
-    --tw-bg-opacity: 1;
-    background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
-}
-
-  /* Dark mode overrides for red outline button */
-  :global(.dark) .btn-red-outline,
-  :global(.performer-portal.dark) .btn-red-outline {
-    border-color: #ef4444;
-    color: #ef4444;
-  }
-  :global(.dark) .btn-red-outline:hover,
-  :global(.performer-portal.dark) .btn-red-outline:hover {
-    background-color: rgba(239, 68, 68, 0.15);
-  }
-  :global(.dark) .btn-red-outline:active,
-  :global(.performer-portal.dark) .btn-red-outline:active {
-    background-color: rgba(239, 68, 68, 0.25);
-  }
-
-  /* ============================================
-     RED TEXT
-     Subtle destructive action (sign out, remove)
-     ============================================ */
-  .btn-red-text {
-    border-color: transparent;
-    background-color: transparent;
-    --tw-shadow: 0 0 #0000;
-    --tw-shadow-colored: 0 0 #0000;
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-  .btn-red-text:hover:not(:disabled) {
-    --tw-bg-opacity: 1;
-    background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
-}
-  .btn-red-text:active:not(:disabled) {
-    --tw-bg-opacity: 1;
-    background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
-}
-
-  /* Dark mode overrides for red text button */
-  :global(.dark) .btn-red-text,
-  :global(.performer-portal.dark) .btn-red-text {
-    color: #ef4444;
-  }
-  :global(.dark) .btn-red-text:hover,
-  :global(.performer-portal.dark) .btn-red-text:hover {
-    background-color: rgba(239, 68, 68, 0.15);
-  }
-  :global(.dark) .btn-red-text:active,
-  :global(.performer-portal.dark) .btn-red-text:active {
-    background-color: rgba(239, 68, 68, 0.25);
-  }
-
-  /* ============================================
-     GRAY TEXT
-     Nav item style - gray text, no border
-     ============================================ */
-  .btn-gray-text {
-    border-color: transparent;
-    background-color: transparent;
-    --tw-shadow: 0 0 #0000;
-    --tw-shadow-colored: 0 0 #0000;
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-  .btn-gray-text:hover:not(:disabled) {
-    --tw-bg-opacity: 1;
-    background-color: rgb(247 247 248 / var(--tw-bg-opacity, 1));
-    --tw-text-opacity: 1;
-    color: rgb(13 21 38 / var(--tw-text-opacity, 1));
-}
-  .btn-gray-text:active:not(:disabled) {
-    --tw-bg-opacity: 1;
-    background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
-}
-
-  /* Dark mode overrides for gray text button */
-  :global(.dark) .btn-gray-text,
-  :global(.performer-portal.dark) .btn-gray-text {
-    color: #9ca3af;
-  }
-  :global(.dark) .btn-gray-text:hover,
-  :global(.performer-portal.dark) .btn-gray-text:hover {
-    background-color: #1f2937;
-    color: #f7f7f8;
-  }
-  :global(.dark) .btn-gray-text:active,
-  :global(.performer-portal.dark) .btn-gray-text:active {
-    background-color: #374151;
-  }
-
-  /* ============================================
-     ICON VARIANT
-     Minimal icon-only buttons (info, close, delete)
-     ============================================ */
-  .btn-icon {
-    border-color: transparent;
-    background-color: transparent;
-    --tw-shadow: 0 0 #0000;
-    --tw-shadow-colored: 0 0 #0000;
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-  .btn-icon:hover:not(:disabled) {
-    background-color: hsl(var(--BG-Tertiary));
-}
-  .btn-icon:active:not(:disabled) {
-    background-color: hsl(var(--BG-Quaternary));
-}
-
-  /* Dark mode overrides for icon button */
-  :global(.dark) .btn-icon,
-  :global(.performer-portal.dark) .btn-icon {
-    background-color: transparent;
-  }
-  :global(.dark) .btn-icon:hover,
-  :global(.performer-portal.dark) .btn-icon:hover {
-    background-color: #1f2937;
-  }
-  :global(.dark) .btn-icon:active,
-  :global(.performer-portal.dark) .btn-icon:active {
-    background-color: #374151;
-  }
-
-  /* ============================================
-     TOGGLE VARIANT
-     For toggle pills (day-of-week selectors, etc.)
-     ============================================ */
-  .btn-toggle {
-    border-width: 1px;
-    border-color: hsl(var(--sidebar-border));
-    background-color: hsl(var(--BG-Tertiary));
-    color: hsl(var(--Text-Secondary));
-}
-  .btn-toggle:hover:not(:disabled) {
-    background-color: hsl(var(--BG-Quaternary));
-}
-  .btn-toggle:active:not(:disabled) {
-    background-color: hsl(var(--BG-Quaternary));
-}
-
-  /* Active state for toggle buttons */
-  .btn-toggle.btn-active {
-    --tw-border-opacity: 1;
-    border-color: rgb(2 132 254 / var(--tw-border-opacity, 1));
-    --tw-bg-opacity: 1;
-    background-color: rgb(2 132 254 / var(--tw-bg-opacity, 1));
-    --tw-text-opacity: 1;
-    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
-}
-  .btn-toggle.btn-active:hover:not(:disabled) {
-    --tw-border-opacity: 1;
-    border-color: rgb(30 64 175 / var(--tw-border-opacity, 1));
-    --tw-bg-opacity: 1;
-    background-color: rgb(30 64 175 / var(--tw-bg-opacity, 1));
-}
-
-  /* Dark mode overrides for toggle button */
-  :global(.dark) .btn-toggle,
-  :global(.performer-portal.dark) .btn-toggle {
-    background-color: #1f2937;
-    color: #9ca3af;
-    border-color: #374151;
-  }
-  :global(.dark) .btn-toggle:hover,
-  :global(.performer-portal.dark) .btn-toggle:hover {
-    background-color: #374151;
-  }
-  :global(.dark) .btn-toggle.btn-active,
-  :global(.performer-portal.dark) .btn-toggle.btn-active {
-    background-color: #3b82f6;
-    color: white;
-    border-color: #3b82f6;
-  }
-  :global(.dark) .btn-toggle.btn-active:hover,
-  :global(.performer-portal.dark) .btn-toggle.btn-active:hover {
-    background-color: #2563eb;
-    border-color: #2563eb;
-  }
-
-  /* ============================================
-     ACTIVE STATE (for nav items)
-     Shows selected/current page state
-     ============================================ */
-  .btn-gray-text.btn-active {
-    background-color: hsl(var(--hover-primary));
-    --tw-text-opacity: 1;
-    color: rgb(29 78 216 / var(--tw-text-opacity, 1));
-}
-  .btn-gray-text.btn-active:hover {
-    background-color: hsl(var(--hover-primary));
-    --tw-text-opacity: 1;
-    color: rgb(29 78 216 / var(--tw-text-opacity, 1));
-}
-
-  /* Dark mode active state */
-  :global(.dark) .btn-gray-text.btn-active,
-  :global(.performer-portal.dark) .btn-gray-text.btn-active {
-    color: white !important;
-    background-color: rgba(17, 24, 39, 1) !important;
-  }
-  :global(.dark) .btn-gray-text.btn-active:hover,
-  :global(.performer-portal.dark) .btn-gray-text.btn-active:hover {
-    color: white !important;
-    background-color: rgba(17, 24, 39, 1) !important;
-  }
-
-  /* ============================================
-     DISABLED STATE
-     ============================================ */
-  .btn-disabled {
-    --tw-border-opacity: 1;
-    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
-    --tw-bg-opacity: 1;
-    background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
-    --tw-text-opacity: 1;
-    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
-}
-  .btn-disabled:hover,
-  .btn-disabled:active {
-    --tw-border-opacity: 1;
-    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
-    --tw-bg-opacity: 1;
-    background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
-}
-
-  /* Dark mode overrides for disabled state */
-  :global(.dark) .btn-disabled,
-  :global(.performer-portal.dark) .btn-disabled {
-    --tw-border-opacity: 1;
-    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
-    --tw-bg-opacity: 1;
-    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
-    --tw-text-opacity: 1;
-    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
-}
-
-  /* ============================================
-     SUCCESS STATE
-     ============================================ */
-  .btn-success {
-    border-width: 1px;
-    --tw-border-opacity: 1;
-    border-color: rgb(5 122 85 / var(--tw-border-opacity, 1));
-    --tw-bg-opacity: 1;
-    background-color: rgb(5 122 85 / var(--tw-bg-opacity, 1));
-}
-  .btn-success:hover {
-    --tw-border-opacity: 1;
-    border-color: rgb(5 122 85 / var(--tw-border-opacity, 1));
-    --tw-bg-opacity: 1;
-    background-color: rgb(5 122 85 / var(--tw-bg-opacity, 1));
-}
-
-  /* ============================================
-     LOADING SPINNER
-     ============================================ */
-  .btn-spinner {
-    width: 18px;
-    height: 18px;
-    border: 2px solid rgba(255, 255, 255, 0.3);
-    border-top-color: white;
-    border-radius: 50%;
-    animation: spin 0.7s linear infinite;
-  }
-
-  @keyframes spin {
-    to {
-      transform: rotate(360deg);
-    }
-  }
-
-  /* ============================================
-     SUCCESS CHECKMARK
-     ============================================ */
-  .btn-checkmark {
-    width: 20px;
-    height: 20px;
-    animation: checkmark-pop 250ms ease-out;
-  }
-
-  .checkmark-path {
-    stroke-dasharray: 30;
-    stroke-dashoffset: 30;
-    animation: checkmark-draw 350ms ease-out 50ms forwards;
-  }
-
-  @keyframes checkmark-draw {
-    to {
-      stroke-dashoffset: 0;
-    }
-  }
-
-  @keyframes checkmark-pop {
-    0% {
-      transform: scale(0.8);
-      opacity: 0;
-    }
-    50% {
-      transform: scale(1.1);
-    }
-    100% {
-      transform: scale(1);
-      opacity: 1;
-    }
-  }
-
-  /* Success text that appears alongside checkmark */
-  .btn-success-text {
-    margin-left: 0.5rem;
-    font-weight: 500;
-    animation: success-text-fade 300ms ease-out 200ms both;
-  }
-
-  @keyframes success-text-fade {
-    0% {
-      opacity: 0;
-      transform: translateX(-4px);
-    }
-    100% {
-      opacity: 1;
-      transform: translateX(0);
-    }
-  }
-
-  /* ============================================
-     INNER LAYOUT
-     ============================================ */
-  .btn-inner {
-    display: inline-flex;
-    align-items: center;
-    visibility: visible;
-  }
-  .btn-inner-hidden {
-    visibility: hidden;
-  }
-
-  .btn-overlay {
-    position: absolute;
-    inset: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .btn-content {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.375rem; /* 6px - matches gap-1.5 */
-    white-space: nowrap;
-  }
-
-  /* Default icon sizing for SVGs in buttons - !important to override inline Tailwind classes */
-  .btn-content :global(svg) {
-    width: 1rem !important;  /* 16px - w-4 */
-    height: 1rem !important; /* 16px - h-4 */
-    flex-shrink: 0;
-  }
-
-  @media (min-width: 640px) {
-    .btn-content {
-      gap: 0.5rem; /* 8px - matches gap-2 on sm+ screens */
-    }
-  }
-
-  /* Responsive microinteraction - lift and press effect */
-  .btn-responsive {
-    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
-    -webkit-tap-highlight-color: transparent;
-  }
-
-  /* Desktop only - hover lift effect */
-  @media (hover: hover) and (pointer: fine) {
-    .btn-responsive:hover:not(:disabled) {
-      transform: translateY(-2px);
-      box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.15);
-    }
-
-    .btn-responsive:active:not(:disabled) {
-      transform: translateY(0);
-      transition-duration: 0.1s;
-    }
-  }
-
-  /* Mobile - subtle scale effect on tap */
-  @media (hover: none) {
-    .btn-responsive:active:not(:disabled) {
-      transform: scale(0.98);
-      transition-duration: 0.1s;
-    }
-  }
-</style>