.body-copy {
  overflow-anchor: none;
  h1, h2, h3, h4, h5, h6 {
    color: $color-brand--one;
  }

  .title--s {
    @include font-style($body-copy-title--s , $body-copy-title--s);
    margin-bottom: $spacing--s;

    & + ol,
    & + ul {
      margin-top: $spacing--m;
    }
  }

  .title--xxs {
    margin-bottom: $spacing--xs;

    & + ol,
    & + ul {
      margin-top: $spacing--s;
    }
  }
  // lists
  ol,
  ul {
    margin-bottom: $spacing--m;

    & + ol,
    & + ul {
      margin-top: $spacing--l;
    }
  }

  li {
    padding-left: $list-item-style-size;

    &::before {
      color: $color-brand--one;
      display: inline-block;
      margin-left: -($list-item-style-size);
      min-width: 35px;
    }
  }

  li + li {
    margin-top: $spacing--xs;
  }
  // unordered list
  ul:not(.list--checks) li::before {
    content: '\2022';
    font-size: 1.2em;
    padding-left: 5px;
  }
  // ordered list
  ol {
    counter-reset: li;
    list-style: none;

    li {
      counter-increment: li
    }

    li::before {
      content: counter(li)'.'' ';
      position: absolute;
    }
  }
  // remove spacing for last item
  p:last-child,
  ul:last-child,
  ol:last-child {
    margin-bottom: 0;
  }
}

// colored headers & lists

// dark blue
.color-preset--dark-blue,
.header.bg-brand--dark-blue ~ .block .color-preset--header {
  h1, h2, h3, h4, h5, h6 {
    color: $color-brand--two;
  }

  li::before {
    color: $color-brand--two;
  }

  .list--checks li::before {
    @include svg-base64('check', $color-brand--two);
  }
}

// red
.color-preset--red,
.header.bg-brand--red ~ .block .color-preset--header {
  h1, h2, h3, h4, h5, h6 {
    color: $color-brand--five;
  }

  li::before {
    color: $color-brand--five;
  }

  .list--checks li::before {
    @include svg-base64('check', $color-brand--five);
  }
}

// turquoise
.color-preset--turquoise,
.header.bg-brand--turquoise ~ .block .color-preset--header {
  h1, h2, h3, h4, h5, h6 {
    color: $color-brand--three;
  }

  li::before {
    color: $color-brand--three;
  }

  .list--checks li::before {
    @include svg-base64('check', $color-brand--three);
  }
}

// yellow
.color-preset--yellow,
.header.bg-brand--yellow ~ .block .color-preset--header {
  h1, h2, h3, h4, h5, h6 {
    color: $color-brand--six;
  }

  li::before {
    color: $color-brand--six;
  }

  .list--checks li::before {
    @include svg-base64('check', $color-brand--six);
  }
}

// overwrite list item colors for selected backgrounds
.bg-brand--blue,
.bg-brand--dark-blue,
.bg-brand--red,
.bg-brand--turquoise,
.bg-brand--yellow {
  h1, h2, h3, h4, h5, h6,
  li::before {
    color: currentColor;
  }

  .list--checks li::before {
    @include svg-base64('check', $color-brand--four);
  }
}

// overwrite list item colors for selected background - yellow specific
.bg-brand--yellow {
  .list--checks li::before {
    @include svg-base64('check', $color-brand--two);
  }
}
