.breadcrumb {
    overflow: hidden; // to avoid horizontal overflow due to the array in items
    padding: 0;
    margin: @breadcrumb-margin-vertical @breadcrumb-margin-horizontal;
    font-size: @breadcrumb-font-size;
    text-transform: @breadcrumb-text-transform;

    .box-shadow(@breadcrumb-box-shadow);
    .border-radius(@breadcrumb-border-radius);


    > li {
        line-height: @line-height-base;
        padding: @breadcrumb-padding-vertical @breadcrumb-padding-horizontal;
        position: relative;

        a {
            color: @breadcrumb-link-color;
            font-weight: bold;

            &:hover,
            &:focus {
                color: @breadcrumb-link-hover-color;
            }
        }

        &:before,
        &:after {
            position: absolute;
            content: " " !important; // make sure to override default bootstrap behavior
        }

        &:not(.active) {
            @breadcrumb-arrow-size: floor((@breadcrumb-padding-vertical*2 + @breadcrumb-line-height*@breadcrumb-font-size)/2);

            margin-right: @breadcrumb-arrow-size + @breadcrumb-inner-border-size;

            // Create arrows
            &:before,
            &:after {
                top: 50%;
                left: 100%;
                border: solid transparent;
                height: 0;
                width: 0;
            }

            &:before {
                margin-top: -(@breadcrumb-arrow-size + @breadcrumb-inner-border-size);
                border-width: @breadcrumb-arrow-size + @breadcrumb-inner-border-size;
                border-left-color: @breadcrumb-inner-border-color;
            }

            &:after {
                margin-top: -(@breadcrumb-arrow-size);
                border-width: @breadcrumb-arrow-size;
                border-left-color: @breadcrumb-bg;
            }
        }
    }
}
