@use '../function' as *;
@use '../mixin';

@mixin roolith-breadcrumb() {
    .breadcrumb {
        font-size: var(--r-breadcrumb-size);
        color: var(--r-breadcrumb-default-color);
        @include mixin.clearfix();
    }

    .breadcrumb-item {
        float: left;

        &:after {
            display: inline-block;
            content: var(--r-breadcrumb-sep-symbol);
            margin: 0 var(--r-breadcrumb-spacing);
            color: var(--r-breadcrumb-sep-color);
        }

        &:last-child:after {
            content: none;
            margin: 0;
        }
    }
}