/* List Components - Rails 8 Best Practices */

.list-unstyled {
  list-style: none;
  padding: 0;
  margin: 0;
}

.list-item {
  margin-bottom: var(--space-md);
  padding: var(--space-md);
  background-color: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.list-item-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.list-item-content {
  flex: 1;
}

.list-item-meta {
  margin: var(--space-xs) 0 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.list-item-actions {
  display: flex;
  gap: var(--space-xs);
}

.list-item-nested {
  margin-left: var(--space-lg);
  padding-left: var(--space-lg);
  border-left: 2px solid var(--color-border-accent);
}

.list-item-indent {
  margin-left: var(--space-2xl);
  padding-left: var(--space-lg);
  border-left: 3px solid var(--color-primary);
}

.list-item-level-1 {
  margin-left: 30px;
}

.list-item-level-2 {
  margin-left: 60px;
}

.list-item-level-3 {
  margin-left: 90px;
}

.list-item-level-4 {
  margin-left: 120px;
}

/* Content Lists - for prose/content pages */
.content-list {
  margin: calc(var(--spacing-sm) * -1) 0 var(--spacing-lg);
  padding-left: var(--spacing-xl);
}

.content-list li {
  position: relative;
  margin-bottom: var(--spacing-xs);
  color: var(--text-secondary);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
}

.content-list li::before {
  content: "•";
  position: absolute;
  left: -1rem;
  color: var(--text-secondary);
}

/* Ordered lists get numbers instead of bullets */
ol.content-list {
  list-style: decimal;
  padding-left: var(--spacing-xl);
}

ol.content-list li {
  margin-bottom: var(--spacing-xs);
  color: var(--text-secondary);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
}

ol.content-list li::before {
  display: none;
  /* Remove bullet for ordered lists */
}