@mixin list {
  list-style: none;
  padding: $spacing-0;
  margin: $spacing-0;

  .c-list {
    padding-left: $spacing-2;
    margin-top: $spacing-2;
  }
}

@mixin list--ordered {
  list-style: none;
  counter-reset: ordered;

  .c-list__item:before {
    content: counters(ordered, ".") ".";
    counter-increment: ordered;
    height: auto;
    width: auto;
  }
}

@mixin list--unstyled {
  list-style: none;

  .c-list__item:before {
    content: "";
    position: initial;
    width: auto;
    height: auto;
    margin-right: $spacing-0;
  }
}

@mixin list--inline {
  list-style: none;

  .c-list__item {
    display: inline-block;

    &:not(:first-child) {
      margin-left: $spacing-2;
    }

    &:before {
      content: "";
      width: auto;
      height: auto;
      margin-right: $spacing-0;
    }
  }
}

@mixin list__item {
  position: relative;

  &:not(:first-child) {
    margin-top: $spacing-2;
  }

  &:before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="%234a5568" d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM6.7 9.29L9 11.6l4.3-4.3 1.4 1.42L9 14.4l-3.7-3.7 1.4-1.42z"/></svg>');
    display: inline-block;
    width: $text-base;
    height: $text-base;
    margin-right: $spacing-3;
  }
}

.c-list {
  @include list;

  &--ordered {
    @include list--ordered;
  }

  &--unstyled {
    @include list--unstyled;
  }

  &--inline {
    @include list--inline;
  }

  &__item {
    @include list__item;
  }
}