.bread-crumb {
    --font-size: var(--root-font-size); /* Reset, use REM */
}

.bread-crumb__item {
    --font-family: inherit;
    --font-size: 0.833em; /* Mobile 13px / > Mobile 15px */
    --font-style: normal;
    --font-weight: var(--root-font-weight--normal);
    --line-height: inherit;

    --color-icon: var(--root-color--primary);
    --color-divider: var(--root-color--primary);

    --size-icon: 1.25rem; /* MUST use REM */
    --size-divider: 1em;
}

.bread-crumb__anchor {
    --color: var(--root-color-text);
}

.bread-crumb__anchor[aria-current="page"] {
    --color: var(--root-color-text);
}

.bread-crumb__anchor:not([aria-current="page"]):hover {
    --color: var(--root-color--primary);
    --color-icon: var(--root-color--primary-dark);
}

.bread-crumb__more {
    --filter: drop-shadow(0 0 .2rem rgba(0, 0, 0, 0.3));
    --background-color: var(--root-color--white);
    --border-radius: 0.5rem;
}

.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="page"] {
    text-decoration: none;
    cursor: text;
    pointer-events: none;
}

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

.bread-crumb:not(.bread-crumb--mobile) .bread-crumb__home__icon {
    display: inline-block;
}

.bread-crumb:not(.bread-crumb--mobile) .bread-crumb__divider__icon {
    display: inline-block;
}

.bread-crumb:not(.bread-crumb--mobile) .bread-crumb__toggle,
.bread-crumb:not(.bread-crumb--mobile) .bread-crumb__toggle__divider {
    display: none;
}

.bread-crumb:not(.bread-crumb--mobile) .bread-crumb__back__icon {
    display: none;
}

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

.bread-crumb:not(.bread-crumb--mobile) .bread-crumb__item__more {
    margin-right: 0;
}

.bread-crumb__more {
    display: contents;
    z-index: 2;
}

.bread-crumb.bread-crumb--mobile .bread-crumb__toggle {
    padding: 0 0.375rem;
}

.bread-crumb.bread-crumb--mobile .bread-crumb__more {
    position: absolute;
    top: calc(100% + 1rem);
    padding: .75rem;
    display: block;
    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.bread-crumb--mobile.bread-crumb--open .bread-crumb__more {
    opacity: 1;
    pointer-events: all;
    transform: none;
    transition: .15s ease-out 0s;
    visibility: visible;
}

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

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

.bread-crumb {
    font-size: var(--font-size, 1rem); /* Reset, use REM */
}

.bread-crumb__item {
    font-family: var(--font-family, inherit);
    font-size: var(--font-size, 1em);
    font-weight: var(--font-weight, normal);
    font-style: var(--font-style, normal);
    line-height: var(--line-height, inherit);
}

.bread-crumb__item .bread-crumb__item {
    font-size: 1em;
}

.bread-crumb__anchor {
    color: var(--color, #000000);
}

.bread-crumb__home__icon {
    fill: var(--color-icon, #000000);
    width: var(--size-icon, 1.25em);
    height: var(--size-icon, 1.25em);
}

.bread-crumb__divider__icon {
    fill: var(--color-divider, grey);
    width: var(--size-divider, 1em);
    height: var(--size-divider, 1em);
}

@media (max-width: 47.999rem) {
    .bread-crumb__more {
        filter: var(--filter, drop-shadow(0 0 .2rem rgba(0, 0, 0, 0.3)));
        background-color: var(--background-color, white);
        border-radius: var(--border-radius, 0.5rem);
        top: calc((var(--line-height) * var(--font-size)) + 0.5rem);
    }

    .bread-crumb__more::before {
        border-bottom-color: var(--background-color, white);
    }
}