$icon-circle: url('data:image/svg+xml;base64, PHN2ZyBpZD0iY2lyY2xlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii01IC01IDEwIDEwIiB3aWR0aD0iMTQiPgogIDxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSI0Ii8+Cjwvc3ZnPg==');


// Base
%nio-list {
  position: relative;
  display:block;
  color: $palette-black;
  margin-left: 18px;
  list-style-type: none;
  counter-reset: list-counter;
}

%nio-list__listItem {
  font-size: $font-size-medium;
  &:before {
    content: $icon-circle;
    left: 0;
    position: absolute;
    color: $palette-dark;
  }
}

// Variants
%nio-list__listItem--numbered {
  &:before {
    font-size: $font-size-large;
    content: counter(list-counter);
    counter-increment: list-counter;
  }
}

%nio-list__listItem--none {
  margin-left: -60px;
  &:before {
    content: '';
    left: 0;
    position: absolute;
  }
}