/* Copyright (C) 2016 NooBaa */

breadcrumbs {
    color: rgb(var(--color02));
    font-size: @font-size4;

    nav {
        line-height: @gutter;
    }

    .crumb {
        position: relative;
        display: block;
        margin-right: 2 * @gutter;

        span {
            display: inline-block;
            max-width: 320px;
            vertical-align: middle;
        }

        &:last-child {
            margin-right: 0;

            &::after, &::before {
                display: none;
            }
        }

        &::after, &::before {
            content: '';
            position: absolute;
            right: -5/4 * @gutter;
            top: 0;
            border: @gutter/2 solid transparent;
            border-right-width: 0;
        }

        &::after {
            top: 4px;
            right: -5/4 * @gutter - 1px;
            border-width: @gutter/2 - 4px;
            border-left-color: rgb(var(--color18));
        }

        &::before {
            border-left-color: rgb(var(--color20));
        }
    }
}
