.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;
}

@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;
    z-index: 2;
}

@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;
        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;
    }
}

.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);
    }
}