.breadcrumbs when (@breadcrumbs){
    & when not(@breadcrumbs-color = @text-color){
        color : @breadcrumbs-color;
    }

    a{
        & when not(@breadcrumbs-link-color = @link-color){
            color : @breadcrumbs-link-color;
        }

        &:hover{
            & when not(@breadcrumbs-link-color-hover = @link-color-hover){
                color : @breadcrumbs-link-color-hover;
            }
        }
    }
    //
    & when (@breadcrumbs-steps){
        @prevStepColor : #FFF;
        @nextStepColor : #555;
        @prevStep : #549132;
        @nextStep : #EEE;
        margin-top  : 0;
        padding     : 0;
        overflow    : hidden;
        list-style  : none;
        font-weight : 600;
        li{
            position     : relative;
            .inline-block();
            margin-right : 0.5em;
            background   : @prevStep;
            &::after,
            &::before{
                position : absolute;
                top      : 0;
                border   : 1.6em solid transparent;
            }
            &::after{
                content           : "";
                left              : 100%;
                z-index           : 1;
                border-left-color : @prevStep;
            }
            &::before{
                content           : "";
                left              : 0;
                border-left-color : #FFF;
            }
            span, a{
                position        : relative;
                float           : left;
                padding         : 1em;
                text-align      : center;
                text-decoration : none;
                color           : @prevStepColor;
            }

            & + li{
                span, a{
                    padding-left : 2.5em;
                }
            }
            &:first-child{
                &::before{
                    display : none;
                }
                span, a{ }
            }
            &:last-child{
                background-color : @nextStep;
                &::after{
                    display : none;
                }
                span, a{
                    color : @nextStepColor;
                }
            }
        }
    }

}