.breadcrumb,
.breadcrumb-center,
.breadcrumb-right {
    @extend %normalize_block;
    @extend %normalize_text;
    @extend %normalize_size;
    
    display: flex;
    align-items: center;
    vertical-align: middle;
    flex-wrap: wrap;
    background-color: var(--var-bg-color);
    color: var(--var-text-color);
    width: 100%;
    max-width: 100%;

    > ul {
        display: flex;
        list-style-type: none;
        margin: 0; padding: 0;

        > li:before {
            content: $breacrumb-separator;
            padding-right: $breacrumb-spacing;
        }

        > li:first-child:before { content: ""; }

        > li {
            &.separator:before, &.separator~li:before { content: none; }
            &.separator > * { margin-right: $breacrumb-spacing; }
            &.active a { font-weight: $font-weight-bold; }
        }

        & a {
            @extend %normalize_text;
            font-size: inherit;
            color: inherit;
            padding-right: $breacrumb-spacing;
        }
    }
}

.breadcrumb-center { justify-content: center }
.breadcrumb-right { justify-content: flex-end }