// =============================================================================
// BREADCRUMBS (CSS)
// =============================================================================
//
//
// 1. Hide breadcrumbs on mobile-sized screens to improve screen real estate.
//
// 2. Since our breadcrumbs are centred with a variable width, we need to use
//    display: inline-block; on the breadcrumbs. Hence needing to remove the
//    white-space with font-size: 0;
//    The font-size is reset in the breadcrumb settings file.
//
// -----------------------------------------------------------------------------

ol.breadcrumbs {
    display: none; // 1
    font-size: 0; // 2
    overflow: visible;
    text-align: center;
    @include breakpoint("small") {
        display: block; // 1
    }
}

.breadcrumb {
    display: inline-block;
    float: none;
    margin-right: 0.25rem;

    &.is-active {
        > .breadcrumb-label {
            cursor: pointer;
            font-weight: 700;
        }
    }

    // needs to override common bigcommerce styles for accessibility improvements
    &:not(:first-child)::before {
        border-right: 0.1em solid $primary-color;
        content: "";
        display: inline-block;
        height: 0.8em;
        margin: 0 0.25rem;
        transform: rotate(15deg);
    }
}
