.list--large-bullets {
  $component-name: ".list--large-bullets";
  $bullet-diameter: 1;
  $padding-vertical-opaque-items: -5;
  $padding-horizontal-opaque-items: -3;

  @at-root {
    ul#{&},
    ol#{&} {
      margin-top: spacing(0);
      margin-bottom: spacing(0);

      & li {
        position: relative;
        display: flex;
        align-items: center;

        padding-left: 0;

        margin: spacing(-2) 0;

        &::before {
          position: static;
          flex: 0 0 auto;
          align-self: flex-start;

          display: flex;
          align-items: center;
          justify-content: center;

          @include set-colors("background-secondary");

          font-size: font-size(0);
          width: spacing($bullet-diameter);
          height: spacing($bullet-diameter);
          border-radius: 50%;
          top: 0;
          margin-right: spacing(-3);
          box-shadow:  0 0 0 $width-border color("background");
          z-index: $z-index-just-above-static;

          @include breakpoint("medium") {
            font-size: font-size(1);
          }

          @include breakpoint("wide") {
            font-size: font-size(2);
          }
        }

        &::after {
          position: absolute;
          content: "";
          background-color: color("background");
          top: 0;
          bottom: 0;
          left: 0;
          width: spacing($bullet-diameter, $times: 0.5);
        }

        &:first-child {
          margin-top: 0;
        }

        &:last-child {
          margin-bottom: 0;
        }
      }

      & #{$component-name}__item {
        &--theme {
          &::before {
            @include set-colors("theme");
          }
        }

        &--confirm {
          &::before {
            @include set-colors("utility-confirm");
          }
        }

        &--warning {
          @include set-colors("utility-warning-background");

          #{$component-name}__content {
            @include set-colors("utility-warning-background", $rewrite-css-vars: true);
          }

          &::before {
            @include set-colors("utility-warning");
          }
        }

        &--attention {
          @include set-colors("utility-attention-background");

          #{$component-name}__content {
            @include set-colors("utility-attention-background", $rewrite-css-vars: true);
          }

          &::before {
            @include set-colors("utility-attention");
          }
        }

        &--warning,
        &--attention {
          padding: spacing($padding-vertical-opaque-items) spacing($padding-horizontal-opaque-items) spacing($padding-vertical-opaque-items) 0;

          &::before {
            margin-top: spacing($padding-vertical-opaque-items, $times: -1);
            margin-bottom: spacing($padding-vertical-opaque-items, $times: -1);
          }
        }
      }
    }
  }

  @at-root {
    ul#{&} {
      & li {
        @include icon-style;

        //TODO deprecate, use .icon-[icon name] class instead
        &[data-icon] {
          &::before {
            content: attr(data-icon);
          }
        }
      }
    }
  }

  @at-root {
    ol#{&} {
      & li::before {
        content: counter(ol-counter);
      }
    }
  }
}