// Breadcrumb vertical alignment
.breadcrumb, .breadcrumb-item {
    align-items: center;
    display: flex;
}

// Breadcrumb item custom color
.breadcrumb-item,
.breadcrumb-item a,
.breadcrumb-item a:hover {
    color: $breadcrumb-color;
}

// Active breadcrumbs with anchor
.breadcrumb-item.active {
    color: $breadcrumb-active-color;
    font-weight: 600;
}

// Automatically sets breadcrumbs with no siblings to the active color
.breadcrumb-item:first-child:last-child,
.breadcrumb-item:first-child:last-child a,
.breadcrumb-item:first-child:last-child a:hover {
    color: $breadcrumb-active-color;
    font-weight: 600;
    opacity: 1;
    cursor: default;
}

// Custom breadcrumb caret, overrides the slash.
.breadcrumb-item + .breadcrumb-item::before {
    content: "";
    padding: 0;
    margin-right: 0.6rem;
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-top: 2px solid currentColor;
    transform: rotate(45deg);
    flex-shrink: 0;
}

//Remove chevron after back button
.hybrid-breadcumb-item + .breadcrumb-item::before {
    display: none;
}

//Truncate long breadcrumb items
.breadcrumb-wrapper {
    overflow: hidden;
}

.breadcrumb:not(.breadcrumble):not(.breadcrumb-form){
    white-space: nowrap;
    overflow: hidden;

    @media only screen and (min-width: 1011px) {
        display: flex;
        flex-wrap: nowrap;
    }

    .breadcrumb-item {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex: 0 auto;
        flex-shrink: 1000;
        align-items: center;
        transition: flex 0.2s linear;

        @media (prefers-reduced-motion) {
            transition: flex 1.2s linear;
        }

        &:not(.hybrid-breadcumb-item) {
            // min-width: 50px;
        }

        &:first-child {
            flex: 1 0 auto !important;
            overflow: visible;
        }

        // Styles the last breadcrumb item only when adding the active class would incorrectly style non-final items in no_report_type & documents folder id
        &:last-child {
            color: $breadcrumb-active-color;
            font-weight: 600;
        }

        &:hover {
            flex: 0 2 auto;
            transition: flex 0.4s linear;

            @media (prefers-reduced-motion) {
                transition: flex 1.4s linear;
            }

            a {
                color: $body-color;
            }
        }

        &.active:hover {
            overflow: visible;
        }
    }

    &:hover .breadcrumb-item:first-child {
        flex: 0 2 auto !important;
    }
}

//breadcrumbs within forms
.breadcrumb-form {
    margin-bottom: 0;
}
