/* Button Component */

/* Pill-shaped buttons with multiple variants, inspired by React Rainbow */

@layer components {
  /* ============================================
     BASE BUTTON
     ============================================ */
  .button {
    /* Layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);

    /* Typography */
    font-family: inherit;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    line-height: 1;
    text-align: center;
    white-space: nowrap;

    /* Appearance */
    border: 1px solid transparent;
    border-radius: var(--radius-pill); /* Signature pill shape */
    padding-inline: var(--space-lg);
    cursor: pointer;
    user-select: none;

    /* Transitions */
    transition:
      background-color var(--transition-fast),
      color var(--transition-fast),
      border-color var(--transition-fast),
      box-shadow var(--transition-fast),
      transform var(--transition-fast);

    /* Default height (medium) */
    height: var(--button-height-md);
  }

  /* ============================================
     SIZE VARIANTS
     ============================================ */
  .button--sm {
    height: var(--button-height-sm);
    font-size: var(--font-size-sm);
    padding-inline: var(--space-md);
  }

  .button--md {
    height: var(--button-height-md);
    font-size: var(--font-size-md);
    padding-inline: var(--space-lg);
  }

  .button--lg {
    height: var(--button-height-lg);
    font-size: var(--font-size-lg);
    padding-inline: var(--space-xl);
  }

  /* ============================================
     STYLE VARIANTS
     ============================================ */

  /* Primary - Filled with brand color */
  .button--primary {
    background-color: var(--color-brand);
    color: white;
    box-shadow: var(--shadow-md);
  }

  .button--primary:hover {
    background-color: var(--color-brand-active);
    box-shadow: var(--shadow-lg);
  }

  .button--primary:active {
    transform: scale(0.95);
  }

  .button--primary:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus-brand);
  }

  /* Secondary - Light gray background */
  .button--secondary {
    background-color: var(--color-gray-1);
    color: var(--color-dark);
    box-shadow: var(--shadow-sm);
  }

  .button--secondary:hover {
    background-color: var(--color-gray-2);
  }

  .button--secondary:active {
    transform: scale(0.95);
  }

  .button--secondary:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus-brand);
  }

  /* Outline - Transparent with brand border */
  .button--outline {
    background-color: transparent;
    color: var(--color-brand);
    border-color: var(--color-brand);
  }

  .button--outline:hover {
    background-color: var(--color-brand-light);
  }

  .button--outline:active {
    transform: scale(0.95);
  }

  .button--outline:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus-brand);
  }

  /* Destructive - Red/error color */
  .button--destructive {
    background-color: var(--color-error);
    color: white;
    box-shadow: var(--shadow-md);
  }

  .button--destructive:hover {
    background-color: var(--color-error-active);
    box-shadow: var(--shadow-lg);
  }

  .button--destructive:active {
    transform: scale(0.95);
  }

  .button--destructive:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus-error);
  }

  /* Ghost - Transparent, minimal styling */
  .button--ghost {
    background-color: transparent;
    color: var(--color-gray-4);
    box-shadow: none;
  }

  .button--ghost:hover {
    background-color: var(--color-gray-1);
  }

  .button--ghost:active {
    transform: scale(0.95);
  }

  .button--ghost:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus-brand);
  }

  /* ============================================
     ICON BUTTONS
     ============================================ */

  /* Icon-only buttons (square/circular) */
  .button--icon-only {
    width: var(--button-height-md);
    padding-inline: 0;
  }

  .button--icon-only.button--sm {
    width: var(--button-height-sm);
  }

  .button--icon-only.button--lg {
    width: var(--button-height-lg);
  }

  /* Icon styling */
  .button__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    flex-shrink: 0;
  }

  .button__icon svg {
    width: 100%;
    height: 100%;
    fill: currentcolor;
  }

  /* ============================================
     DISABLED STATE
     ============================================ */
  .button--disabled,
  .button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }

  /* ============================================
     LOADING STATE (with HTMX)
     ============================================ */
  .button.htmx-request {
    opacity: 0.7;
    pointer-events: none;
  }

  /* Optional spinner inside button during HTMX request */
  .button .htmx-indicator {
    display: none;
  }

  .button.htmx-request .htmx-indicator {
    display: inline-flex;
  }

  /* ============================================
     FULL WIDTH
     ============================================ */
  .button--full {
    width: 100%;
  }
}