/**
 * File Name: gco-ui-list.css
 * Project: GCO UI CSS Architecture Migration
 * Pattern: gco_list / PL-0021
 */

:root {
  --gco-ui-list-foreground: var(--gco-ui-text-on-dark);
  --gco-ui-list-on-light-foreground: var(--gco-ui-text-on-light);
  --gco-ui-list-marker-foreground: var(--gco-ui-list-foreground);
  --gco-ui-list-indent: var(--gco-ui-space-5);
  --gco-ui-list-block-gap: var(--gco-ui-space-4);
  --gco-ui-list-item-gap: var(--gco-ui-space-2);
}

.gco-ui-list {
  margin-block-start: 0;
  margin-block-end: var(--gco-ui-list-block-gap);
  margin-inline: 0;
  padding-inline-start: var(--gco-ui-list-indent);
  list-style-position: outside;
  font-family: var(--gco-ui-font-family);
  font-size: var(--gco-ui-font-size-2);
  font-weight: var(--gco-ui-font-weight-normal);
  line-height: var(--gco-ui-line-height);
  color: var(--gco-ui-list-foreground);
}

.gco-ui-list--on-light {
  --gco-ui-list-foreground: var(--gco-ui-list-on-light-foreground);
  --gco-ui-list-marker-foreground: var(--gco-ui-list-on-light-foreground);
}

ul.gco-ui-list {
  list-style-type: disc;
}

ol.gco-ui-list {
  list-style-type: decimal;
}

.gco-ui-list__item {
  margin-block-start: 0;
  margin-block-end: var(--gco-ui-list-item-gap);
  margin-inline: 0;
}

.gco-ui-list__item:last-child {
  margin-block-end: 0;
}

.gco-ui-list__item::marker {
  color: var(--gco-ui-list-marker-foreground);
}