// default list variables
$list-padding-left: 1.25em !default;
$list-margin-top: 1em !default;
$list-item-margin-top: 0.4em !default;
$list-color-primary: $colour-orange !default;
$list-line-height: 1.7 !default;

// fancy list variables
$list-fancy-circle-size: 2.5em !default;
$list-fancy-circle-line-height: 2.5 !default;

.list {
  margin: 0;
  padding-left: $list-padding-left;
  line-height: $list-line-height;

  & + & {
    margin-top: $list-margin-top;
  }

  ul {
    //force consistent styling for nested lists
    list-style-type: disc;
  }
}

.list__item + .list__item {
  margin-top: $list-item-margin-top;
}

.list__item-content {
  display: block;
  color: $color-font-default;
}

.list--fancy {
  padding-left: 0;
  list-style: none;

  .heading {
    margin-bottom: 0.5em;
    line-height: 1.25;
  }
}

.list__item--fancy::before {
  content: attr(data-index);
  float: left;
  border-radius: 50%;
  background: $colour-grey-xlight;
  width: $list-fancy-circle-size;
  height: $list-fancy-circle-size;
  line-height: $list-fancy-circle-line-height;
  text-align: center;
}

.list__item--fancy + .list__item--fancy {
  margin-top: $list-item-margin-top * 2;
}

.list__item-content--fancy {
  margin-left: ($list-fancy-circle-size + 0.625em);
  padding-top: ($list-fancy-circle-line-height - $list-line-height) / 2 * 1em;
  min-height: $list-fancy-circle-size;
}

.list--primary {
  color: $list-color-primary;
}

.list__item--primary::before {
  background: $list-color-primary;
  color: #fff;
}