/* ====================================== */
/* ========== Breadcrumb ==================== */
/* ====================================== */

.breadcrumbs {
    --_side-padding: 0;
    display: block;
    height: 48px;
    overflow-x: hidden;
    padding: 0 var(--_side-padding);
    position: relative;
    width: 100%
}

.breadcrumbs:after {
    display: none
}

@media (min-width: 1200px) {
    .breadcrumbs {
        --_side-padding: max(64px, calc(50vw - 656px)) !important
    }
} 

.breadcrumbs:before {
    bottom: 0;
    content: "";
    display: block;
    height: 48px;
    left: 0;
    pointer-events: none;
    position: absolute;
    transition: all .5s var(--sds-easing-standard);
    width: 100%;
    z-index: 3
}



.breadcrumb {
    align-items: center;
    display: flex;
    gap: 8px;
    height: 48px;
    margin: 0;
    padding: 0;
    position: absolute
}

.breadcrumb a,
.breadcrumb li,
.breadcrumb li.active {
    align-content: center;
    align-items: center;
    color: var(--sds-color-text-02-default);
    display: inline-flex;
    flex-shrink: 0;
    font-family: system-ui, -apple-system, sans-serif;
    font-size: .75rem;
    font-weight: 500;
    padding: 0
}

@media (prefers-color-scheme: dark) {

    .breadcrumb a,
    .breadcrumb li,
    .breadcrumb li.active {
        color: var(--button-tertiary-invert-label, #f8f7f5)
    }
}

@media (min-width: 768px) {

    .breadcrumb a,
    .breadcrumb li,
    .breadcrumb li.active {
        margin-left: 0
    }
}

.breadcrumb li>a {
    align-items: center;
    height: 48px;
    line-height: var(--line-height-reset);
    padding: 12px 4px;
    position: relative;
    text-decoration: none
}

.breadcrumb li>a:after {
    background: var(--sds-color-miscellaneous-interactive-background-active);
    border-radius: 4px;
    content: "";
    height: 24px;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    z-index: -1
}

.breadcrumb li>a:active:after,
.breadcrumb li>a:focus:after,
.breadcrumb li>a:hover:after {
    opacity: 1
}

.breadcrumb li>a:active {
    transform: scale(.95)
}

.breadcrumb li>a:active:after {
    transform: scale(1.05) translateY(-50%)
}

.breadcrumb li>a:focus-visible {
    border-radius: 4px;
    outline: 2px solid var(--sds-color-button-tertiary-label-neutral);
    outline-offset: -2px
}

@media (prefers-color-scheme: dark) {
    .breadcrumb li>a:focus-visible {
        outline: 2px solid var(--sds-color-button-tertiary-invert-label)
    }
}

.breadcrumb li>a:focus-visible:after {
    display: none
}

.breadcrumb>li+li:before {
    background-color: var(--sds-color-text-02-default);
    content: "";
    display: inline-block;
    height: 16px;
    -webkit-mask: url(../images/icons/arrow-right.svg) no-repeat 50% 50%;
    mask: url(../images/icons/arrow-right.svg) no-repeat 50% 50%;
    position: relative;
    width: 16px
}

@media (prefers-color-scheme: dark) {
    .breadcrumb>li+li:before {
        background-color: var(--sds-color-button-tertiary-invert-label)
    }
}

.breadcrumb li:first-of-type a:before {
    background-color: var(--sds-color-text-02-default);
    content: "";
    display: inline-block;
    height: 16px;
    margin: 0;
    -webkit-mask: url(../images/icons/home.svg) no-repeat 50% 50%;
    mask: url(../images/icons/home.svg) no-repeat 50% 50%;
    padding-inline: 12px;
    position: relative;
    width: 16px
}

@media (prefers-color-scheme: dark) {
    .breadcrumb li:first-of-type a:before {
        background-color: var(--sds-color-button-tertiary-invert-label)
    }
}


.breadcrumb li:first-of-type a:after {
    left: 12px;
    width: 24px
}