/* ==================================================
   List Component
   schwimm einfach Theme
================================================== */

/*
 * Basisliste
 *
 * Entfernt die Standardformatierung des Browsers.
 */
.list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * Vertikale Liste
 */
.list--stacked {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

/*
 * Horizontale Liste
 *
 * Beispielsweise für kurze Metadaten
 * oder Linkgruppen.
 */
.list--inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
}

/*
 * Liste mit Punkten
 */
.list--bullet {
  padding-left: var(--space-24);
  list-style: disc;
}

.list--bullet li::marker {
  color: var(--color-primary);
}

/*
 * Liste mit Häkchen oder eigenem Symbol
 */
.list--check {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.list--check li {
  position: relative;
  padding-left: var(--space-32);
}

.list--check li::before {
  position: absolute;
  top: 0;
  left: 0;

  content: "✓";
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
}

/*
 * Liste mit Trennlinien
 */
.list--divided > li {
  padding-block: var(--space-16);
  border-bottom: 1px solid var(--color-border);
}

.list--divided > li:first-child {
  padding-top: 0;
}

.list--divided > li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

/*
 * Zweizeilige Informationsliste
 */
.list__label {
  display: block;
  margin-bottom: var(--space-4);
  color: var(--color-secondary);
  font-weight: var(--font-weight-bold);
}

.list__text {
  display: block;
  color: var(--color-text);
}