// RAMEN LIST COMPONENT
//
//
// Required Global Variables:
// $spacing-base
// $spacing-xsmall
// $spacing-medium
//
//
// Required Component Variables:
//
// $list-dot-color: Sets the colour of the list bullet/number
//
//

@mixin list {
  @include body-text;
  list-style-type: none;
  margin-bottom: $spacing-medium;
  overflow: hidden;
  padding: 0;

  li {
    margin-bottom: $spacing-xsmall;
    padding-left: $spacing-medium;
    position: relative;

    > ul {
      margin-bottom: 0;
      margin-top: $spacing-xsmall;
    }

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

    &:before {
      color: $list-dot-color;
      display: inline-block;
      left: 0;
      position: absolute;
      top: 0;
      vertical-align: middle;
    }
  }
}

@mixin list-unordered {
  li:before {
    background-color: $list-dot-color;
    border-radius: 100%;
    content: '';
    font-size: toRems(35px);
    height: $list-dot-size;
    top: 50%;
    transform: translateY(-50%);
    width: $list-dot-size;
  }
}

@mixin list-ordered {
  counter-reset: section;

  li:before {
    content: counter(section, decimal) '.';
    counter-increment: section;
    font-weight: $font-weight-semibold;
  }

  ol {
    li {
      &:before {
        content: counter(section);
      }
    }
  }
}

.c-list {
  @include list;

  // Unordered Lists
  &--unordered {
    @include list-unordered;
  }

  // Ordered Lists
  &--ordered {
    @include list-ordered;
  }
}