/* List Item Component */

/* Generic list item pattern with optional icon, content area, and actions */

@layer components {
  /* ============================================
     BASE LIST ITEM
     ============================================ */
  .list-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md);
    border: 1px solid var(--color-gray-2);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    transition: border-color var(--transition-fast);
  }

  .list-item:hover {
    border-color: var(--color-gray-3);
  }

  /* ============================================
     LIST ITEM SECTIONS
     ============================================ */

  /* Icon */
  .list-item__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-gray-2);
    flex-shrink: 0;
    color: var(--color-gray-4);
  }

  /* Content */
  .list-item__content {
    flex: 1;
    min-width: 0; /* Allow text truncation */
  }

  /* Actions */
  .list-item__actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-shrink: 0;
  }

  /* ============================================
     RESPONSIVE
     ============================================ */

  /* On small screens, stack vertically */
  @media (width <= 640px) {
    .list-item {
      flex-direction: column;
    }

    .list-item__icon {
      width: 40px;
      height: 40px;
    }

    .list-item__actions {
      width: 100%;
      justify-content: stretch;
    }

    .list-item__actions > * {
      flex: 1;
    }
  }
}