/*
 * Breadcrumb Component Styles - Pop Art Edition
 * Navigation trail with chevron separators
 *
 * TSX Reference (lines 506-518):
 * <nav className="flex items-center gap-1 flex-wrap text-sm">
 *   {['Home', 'Projects', 'Website', 'Assets'].map((c, i, a) => (
 *     <div key={i} className="flex items-center gap-1">
 *       <button className={`font-bold transition-colors ${i === a.length - 1 
 *         ? 'text-pink-500' 
 *         : `${theme.text} hover:text-blue-500`}`}>{c}</button>
 *       {i < a.length - 1 && <ChevronRight size={14} className={theme.textMuted} />}
 *     </div>
 *   ))}
 * </nav>
 */

@layer components {
  /* ==========================================================================
     Breadcrumb Container
     ========================================================================== */

  .breadcrumb {
    background: var(--color-surface);
    border: var(--border-thick) solid var(--color-comic-border);
    padding: var(--space-3);
    box-shadow: var(--comic-shadow-md);
  }

  /* Minimal variant - no card styling, just the breadcrumb trail */
  .breadcrumb-minimal {
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
  }

  /* ==========================================================================
     Breadcrumb List
     ========================================================================== */

  .breadcrumb-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-sm);
  }

  /* ==========================================================================
     Breadcrumb Item
     ========================================================================== */

  .breadcrumb-item {
    display: flex;
    align-items: center;
    gap: var(--space-1);
  }

  /* ==========================================================================
     Breadcrumb Link (non-current items)
     ========================================================================== */

  .breadcrumb-link {
    font-weight: var(--font-bold);
    color: var(--color-ink);
    text-decoration: none;
    transition: color 0.15s ease;

    &:hover {
      color: var(--color-wham-blue);
      text-decoration: none;
    }
  }

  /* ==========================================================================
     Breadcrumb Current (last item)
     ========================================================================== */

  .breadcrumb-current {
    font-weight: var(--font-bold);
    color: var(--color-kapow-pink);
  }

  /* ==========================================================================
     Breadcrumb Separator
     ========================================================================== */

  .breadcrumb-separator {
    display: flex;
    align-items: center;
    color: var(--color-ink-muted);

    & svg {
      width: 14px;
      height: 14px;
    }
  }
}