@mixin list-before(
  $class,
  $disc-or-circle,
  $colors: ($base-color, map-get($default-colors, "shadow"))
) {
  &.is-#{$class} li::before {
    position: absolute;
    top: calc(50% - 8px);
    left: -22px;
    content: "";

    @include pixelize(2px, $disc-or-circle, $colors);
  }
}

.nes-list {
  // prettier-ignore
  $disc: (
    (0,0,0,1,1,0,0,0),
    (0,0,1,1,1,1,0,0),
    (0,1,1,1,1,1,1,0),
    (0,1,1,1,1,1,1,0),
    (0,0,1,1,1,1,0,0),
    (0,0,0,1,1,0,0,0)
    );

  // prettier-ignore
  $circle: (
    (0,0,0,1,1,0,0,0),
    (0,0,1,1,1,1,0,0),
    (0,1,1,0,0,1,1,0),
    (0,1,1,0,0,1,1,0),
    (0,0,1,1,1,1,0,0),
    (0,0,0,1,1,0,0,0)
  );

  list-style-type: none;

  & li {
    position: relative;
  }

  @include list-before("disc", $disc);
  @include list-before("circle", $circle);

  &.is-dark {
    $dark-colors: ($background-color, $base-color);
    @include list-before("disc", $disc, $dark-colors);
    @include list-before("circle", $circle, $dark-colors);

    li {
      color: $color-white;
    }
  }
}