scss adjusted custom style list

custom-list.scss

@mixin custom-list($type) {
  $padding: 10px;
  $width: 100px;

  list-style-type: none;

  & > li {
    counter-increment: $type;
    position: relative;

    &:before {
      display: block;
      left: -($width+$padding);
      position: absolute;
      text-align: right;
      width: $width;
      @content
    }
  }
}

ol {
  margin: 0px;

  @include custom-list(section) {
    content: counter(section, decimal) ". ";
  }

  & > ol {
    @include custom-list(subsection) {
      content: "(" counter(subsection, decimal) ") ";
    }
  }

  & > ol > ol {
    @include custom-list(subsubsection) {
      content: counter(subsubsection, katakana) ". ";
    }
  }
}