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

.bread-crumb__item {
    --font-family: var(--root-font-family--primary);
    --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: #9fa3a7;

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

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

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

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

.bread-crumb__list {
    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 {
    display: none;
    vertical-align: sub;
}

.bread-crumb__divider__icon {
    display: none;
    vertical-align: sub;
}

.bread-crumb__back__icon {
    display: inline-block;
    vertical-align: middle;
}

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

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

    .bread-crumb__back__icon {
        display: none;
    }
}

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

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

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

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

@media (min-width: 30rem) {
    .bread-crumb__item {
        font-size: var(--font-size, 1em);
    }
}