// This is a snipit from a post I wrote up detailing the process. Check it out if you want to learn more
// https://jimmynotjim.snipt.net/create-a-custom-ordered-list-in-css-and-sass/

// Basic mixin to prefix each li w/ it's list number
@mixin custList {
    counter-reset: item;
    list-style: none;

    & > li {
        &::before {
            content: counter(item) ".";
            counter-increment: item;
        }
    }
}

// Sets the prefixes to act more like a traditional ordered list ie. hanging & independent
@mixin hangList {
    @include rem(padding-left, 52px);

    & > li {
        position: relative;
    
        &:before {
            @include rem(left, -32px);
            @include rem(width, 26px);
            content: counter(item);
            position: absolute;
            text-align: right;
        }
    }
}

// An example of how you would use the two mixins followed by customized content and styles
.steps {
    @include custList;
    @include hangList;
    @include rem(padding-left, 72px);

    & > li {
        border-bottom: 1px solid $blueHighlight;

        &::before
            @include slab;
            @include rem(font-size, 20px);
            @include rem(left, -66px);
            @include rem(width, 60px);
            color: $blue;
            content: "Step " counter(item) "- ";           
        }        
    }
}