/**
 * List Group Component
 * Replaces Bootstrap list-group with design-system equivalent
 *
 * @author Amit Haridas, ConcreteInfo
 */

.ci-list-group {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.ci-list-group-item {
  padding: var(--spacing-3) var(--spacing-4);
  background-color: var(--bg-secondary);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  transition: background-color var(--transition-fast);
}

.ci-list-group-item:last-child {
  border-bottom: none;
}

.ci-list-group-item--action {
  cursor: pointer;
  text-decoration: none;
  display: block;
}

.ci-list-group-item--action:hover {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}

.ci-list-group-item.active,
.ci-list-group-item--active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--text-inverse);
}

.ci-list-group-item--success  { border-left: 3px solid var(--color-success); }
.ci-list-group-item--danger   { border-left: 3px solid var(--color-danger); }
.ci-list-group-item--warning  { border-left: 3px solid var(--color-warning); }
.ci-list-group-item--info     { border-left: 3px solid var(--color-info); }