ol.breadcrumb.title-bar-breadcrumb {
    background : transparent;
    color      : $breadcrumb-active-color;
    flex-wrap  : nowrap;
    display    : flex;
    align-items: center;
    line-height: 20px;
    min-height : 24px; // Allow growth at zoom/enlarged text
    min-width  : 0; // Allow container to shrink

    li {
        color      : $breadcrumb-active-color;
        display    : flex;
        align-items: center;
        min-width  : 0; // Allows child a to show ellipsis
        flex       : 0 1 auto; // Shrink but don't grow

        &.active {
            color         : $breadcrumb-active-color;
            font-weight   : $font-weight-base;
            white-space   : nowrap;
            display       : inline-block;
            max-width     : $breadcrumb-item-max-width; // Cap width to prevent covering other breadcrumb items
            overflow      : hidden;
            text-overflow : ellipsis;
        }
    }

    a {
        color         : $breadcrumb-link-color;
        font-weight   : $font-weight-normal;
        padding       : 2px 6px;
        display       : inline-block;
        max-width     : $breadcrumb-item-max-width; // Cap width so text-overflow:ellipsis triggers
        @include state-border(1px, transparent);
        overflow      : hidden;
        text-overflow : ellipsis;
        white-space   : nowrap;

        &:hover {
            @include state-border(1px, $grape75);
        }

        &:focus-visible {
            @include inset-border(2px, $grape90);
        }

        &:active {
            @include state-border(1px, $grape75);
            background-color : $g-100;
            color            : $breadcrumb-active-color;
        }
    }
}

// Legacy support from custom.scss
.ls-ba li > div {
    display : inline-block;
}

// Legacy support from lime-admin-colors
.surveymanagerbar {
    background-color : transparent;
    color            : $breadcrumb-active-color;
}

// Bootstrap 5 breadcrumb customization
.breadcrumb {
    font-size     : $breadcrumb-font-size;
    margin-bottom : 0;
    align-items   : center;
}

.breadcrumb-item + .breadcrumb-item:before {
    color         : $breadcrumb-divider-color;
    padding-right : $breadcrumb-spacing;
    font-weight   : $font-weight-base;
}

.breadcrumb-item + .breadcrumb-item.active:before {
    padding-right : $breadcrumb-spacing + 6px;
}

.breadcrumb-item + .breadcrumb-item {
    padding-left : $breadcrumb-spacing;
}

// Breadcrumb wrapper
.ls-breadcrumb {
    margin-bottom: 0.65em;

    h1 {
        margin : 0;
    }
}

#breadcrumb-container {
    width: 100%;
}
