Minimal Pill Button

---
/**
 * MinimalPillButton — A cleanly rounded pill button optimized for minimal interactions and tags.
 * 
 * @param {string} href - Optional. If provided, renders an <a> tag instead of <button>.
 * @param {'button'|'submit'|'reset'} type - Optional. The HTML button type. Default is 'button'.
 * @param {'primary'|'secondary'|'ghost'} variant - Optional. The visual style variant. Default is 'primary'.
 * @param {'sm'|'md'|'lg'} size - Optional. The size variant of the button. Default is 'md'.
 * @param {boolean} disabled - Optional. Whether the button is disabled. Default is false.
 */
interface Props {
  href?: string;
  type?: 'button' | 'submit' | 'reset';
  variant?: 'primary' | 'secondary' | 'ghost';
  size?: 'sm' | 'md' | 'lg';
  disabled?: boolean;
}

const { 
  href, 
  type = 'button', 
  variant = 'primary', 
  size = 'md',
  disabled = false 
} = Astro.props;

const Tag = href ? 'a' : 'button';
---

<Tag 
  href={href} 
  type={href ? undefined : type}
  disabled={disabled}
  class={`pill-btn pill-btn--${variant} pill-btn--${size}`}
>
  <slot />
</Tag>

<style>
  .pill-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.5rem;
    border-radius: var(--r-full, 9999px);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    white-space: nowrap;
    border: 1px solid transparent;
    font-family: var(--font-sans, inherit);
  }

  .pill-btn:hover:not(:disabled) {
    transform: translateY(-1px);
  }

  .pill-btn:active:not(:disabled) {
    transform: translateY(0);
  }

  .pill-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(1);
  }

  /* Variants */
  .pill-btn--primary {
    background: rgba(255, 255, 255, 0.05);
    color: var(--c-text-2, #94a3b8);
    border-color: rgba(255, 255, 255, 0.1);
  }
  .pill-btn--primary:hover:not(:disabled) {
    background: #fff;
    color: #000;
    border-color: #fff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  }

  .pill-btn--secondary {
    background: var(--c-primary, #6366f1);
    color: #fff;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
  }
  .pill-btn--secondary:hover:not(:disabled) {
    background: var(--c-primary-light, #818cf8);
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.3);
  }

  .pill-btn--ghost {
    background: transparent;
    color: var(--c-text-2, #94a3b8);
    border-color: rgba(255, 255, 255, 0.1);
  }
  .pill-btn--ghost:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
  }

  /* Sizes */
  .pill-btn--sm { padding: 0.35rem 1.2rem; font-size: 0.75rem; }
  .pill-btn--md { padding: 0.55rem 1.6rem; font-size: 0.85rem; }
  .pill-btn--lg { padding: 0.8rem 2.2rem; font-size: 1rem; }
</style>