@import "~bootstrap/scss/breadcrumb";

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    padding: $breadcrumb-padding-y $breadcrumb-padding-x;
    margin-bottom: $breadcrumb-margin-bottom;
    @include font-size($breadcrumb-font-size);
    list-style: none;
    background-color: $breadcrumb-bg;
    @include border-radius($breadcrumb-border-radius);
}

.breadcrumb-item {
    i {
        padding-right: 0.5rem;
    }

    a {
        color: $primary;
        text-decoration: $link-decoration;
    }

    // The separator between breadcrumbs (by default, a forward-slash: ">")
    +.breadcrumb-item {
        padding-left: $breadcrumb-item-padding-x;

        &::before {
            float: left; // Suppress inline spacings and underlining of the separator
            padding-right: $breadcrumb-item-padding-x;
            color: $link-color;
            font-weight: bold;
            content: var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"};
        }

        &.active {
            color: $primary !important;
            font-weight: bold;
        }
    }
}