.bread-crumb {
    width: 100%;
}

.bread-crumb__list {
    position: relative;
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
}

.bread-crumb__item {
    display: inline;
    margin-right: 0.188em;
}

.bread-crumb__anchor {
    word-break: break-word;
    overflow-wrap: break-word;

    -webkit-hyphens: auto;
    hyphens: auto;

    -webkit-hyphenate-limit-before: 8;
    -webkit-hyphenate-limit-after: 4;
    hyphenate-limit-chars: 12 8 4;

    -webkit-hyphenate-limit-lines: 2;
    hyphenate-limit-lines: 2;
}

.bread-crumb__anchor[aria-current="location"] {
    text-decoration: none;
    cursor: text;
    pointer-events: none;
}

.bread-crumb__home__icon,
.bread-crumb__divider__icon {
    vertical-align: sub;
}

@media (min-width: 48rem) {
    .bread-crumb__home__icon {
        display: inline-block;
    }

    .bread-crumb__divider__icon {
        display: inline-block;
    }

    .bread-crumb__back__icon {
        display: none;
    }
}

.bread-crumb__toggle {
    appearance: none;
    background: none;
    border: 0;
    user-select: none;
    text-decoration: underline;
    cursor: pointer;
}

@media (min-width: 48rem) {
    .bread-crumb__toggle,
    .bread-crumb__toggle__divider {
        display: none;
    }

    .bread-crumb__item__more {
        margin-right: 0;
    }
}

.bread-crumb__more {
    display: contents;
}

@media (max-width: 47.999rem) {
    .bread-crumb__toggle {
        padding: 0 0.375rem;
    }

    .bread-crumb__more {
        position: absolute;
        top: calc(100% + 1rem);
        padding: .75rem;
        display: block;
        z-index: 1;
        opacity: 0;
        pointer-events: none;
        transform: scale(.8);
        transform-origin: top left;
        transition: .1s ease-in 0s;
        transition-property: transform, opacity, visibility;
        visibility: hidden;
        will-change: visibility, opacity, transform;
        left: 2.2rem;
    }

    .bread-crumb__toggle:focus + .bread-crumb__more,
    .bread-crumb__more:hover,
    .bread-crumb__more:focus-within {
        opacity: 1;
        pointer-events: all;
        transform: none;
        transition: .15s ease-out 0s;
        visibility: visible;
    }

    .bread-crumb__more::before {
        content: "";
        position: absolute;
        bottom: 100%;
        pointer-events: none;
        border: 0.5rem solid transparent;
    }

    .bread-crumb__more .bread-crumb__item {
        display: block;
        line-height: 2;
    }
}