LESS and HTMl for arrowed progress nav

signup.html

{% macro progress_nav_link(step_name, text) %}
    <a href="{{ step_name }}" ng-class="{
        'not-completed-or-current': !completedOrCurrent('{{ step_name }}')
    }">
        {{ text }}
    </a>
{% endmacro %}

<div class="progress-nav">
    {{ _self.progress_nav_link('services', 'Services')}}
    {{ _self.progress_nav_link('address', 'Location') }}
    {{ _self.progress_nav_link('travel', 'Travel') }}
    {{ _self.progress_nav_link('profile', 'Business') }}
    {{ _self.progress_nav_link('account', 'Contact') }}
</div>

signup.less

@import "../imports/modules";

@minimum-viable-width-for-progress-nav: 490px;

.progress-nav {
    @count: 5;
    @height: 30px;
    @gutter: 3.5%;
    @arrow-width: (@height / 2);
    @border-radius: 4px;

    .set-background-and-psuedos-color(@foreground, @background) {
        background: @background;
        color: @foreground;

        &:before {
            border-color: @background @background @background transparent;
        }

        &:after {
            border-color: transparent transparent transparent @background;
        }
    }

    margin: 0 (@gutter * -1) 20px 0;
    .clearfix();

    // Form is still fully navigable w/o progress nav
    @media (max-width: @minimum-viable-width-for-progress-nav) {
        display: none;
    }

    a {
        float: left;
        text-align: center;
        position: relative;
        color: @black;
        line-height: @height;
        height: @height;
        padding: 0 (@height / 4);
        width: ((100% - @gutter * @count) / @count);
        margin-right: @gutter;
        .box-sizing();

        .transition(background-color, .2s);

        &:before, &:after {
            content: "";
            border-color: transparent;
            border-width: (@height / 2) @arrow-width;
            border-style: solid;
            position: absolute;
            top: 0;

            .transition(border-color, .2s);
        }

        // Rightward arrow
        &:after {
            right: (@arrow-width * -2);
            z-index: 1; // extend click target over next sibling
        }

        // Arrow inset for previous sibling
        &:before {
            clip: rect(0, @arrow-width, @height, 0);
            left: (@arrow-width * -1);
        }

        .set-background-and-psuedos-color(@white, @link);

        &.not-completed-or-current {
            .set-background-and-psuedos-color(@white, @gray-darker);
            .opacity(70);
            cursor: default;
        }

        &:first-child {
            .border-radius(@border-radius 0 0 @border-radius);
            padding-left: @arrow-width;

            &:before {
                display: none;
            }
        }

        // IE8 won't get this. That's fine.
        &:last-child {
            .border-radius(0 @border-radius @border-radius 0);
            padding-right: @arrow-width;

            &:after {
                display: none;
            }
        }

        // IE7 won't do box-sizing or arrows. Revert to spartan utility.
        .ie7 & {
            width: auto;
            margin-right: @arrow-width;
            .horizontal-padding(@arrow-width);
        }
    }
}