.quiqqer-core-controls-breadcrumb {
    --_font-size: var(--quiqqer-core-controls-breadcrumb-font-size, var(--_q-controlConf-font-size, 0.9em));
    --_padding-y: var(--quiqqer-core-controls-breadcrumb-padding-y, var(--_q-controlConf-padding-y, 1rem));
    --_mask-size: var(--quiqqer-core-controls-breadcrumb-mask-size, 1.5rem);

    font-size: var(--_font-size);
}

.quiqqer-core-controls-breadcrumb-container {
    --_mask-start: 0px;
    --_mask-end: 0px;

    -ms-overflow-style: none;
    align-items: center;
    display: flex;
    gap: 0.75rem;
    height: 100%;
    mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 var(--_mask-start),
        #000 calc(100% - var(--_mask-end)),
        transparent 100%
    );
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: var(--_padding-y);
    padding-top: var(--_padding-y);
    scrollbar-width: none;
    transition-duration: 0.2s;
    transition-property: --_mask-start, --_mask-end;
    white-space: nowrap;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 var(--_mask-start),
        #000 calc(100% - var(--_mask-end)),
        transparent 100%
    );
}

.quiqqer-core-controls-breadcrumb-container::-webkit-scrollbar {
    display: none;
}

.quiqqer-core-controls-breadcrumb-container--draggable {
    cursor: grab;
}

.quiqqer-core-controls-breadcrumb-container--draggable a {
    -webkit-user-drag: none;
}

.quiqqer-core-controls-breadcrumb-container--draggable.is-dragging {
    cursor: grabbing;
    user-select: none;
    -webkit-user-select: none;
}

.quiqqer-core-controls-breadcrumb-container--draggable.is-dragging a {
    pointer-events: none;
}

.quiqqer-core-controls-breadcrumb-title {
    display: inline-flex;
    flex: 0 0 auto;
}

.quiqqer-core-controls-breadcrumb ul {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 0.75rem;
    margin: 0;
    min-width: max-content;
    padding: 0 !important;
    white-space: nowrap;
}

.quiqqer-core-controls-breadcrumb ul li {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 0.75rem;
    margin: 0;
    overflow: visible;
    padding-left: 0;
}

.quiqqer-core-controls-breadcrumb-link {
    align-items: center;
    display: inline-flex;
    text-decoration: none;
}

.quiqqer-core-controls-breadcrumb-link:not(:hover, :active) {
    --color: inherit;
}

.quiqqer-core-controls-breadcrumb-separator {
    align-items: center;
    color: inherit;
    display: inline-flex;
    flex: 0 0 auto;
    justify-content: center;
    min-width: 0.5rem;
}

.quiqqer-core-controls-breadcrumb--last-item-primary .quiqqer-core-controls-breadcrumb-list-element.is-current .quiqqer-core-controls-breadcrumb-link {
    color: var(--qui-colors-primary, currentColor);
}

.quiqqer-core-controls-breadcrumb--last-item-bold .quiqqer-core-controls-breadcrumb-list-element.is-current .quiqqer-core-controls-breadcrumb-link,
.quiqqer-core-controls-breadcrumb--last-item-primary-bold .quiqqer-core-controls-breadcrumb-list-element.is-current .quiqqer-core-controls-breadcrumb-link {
    font-weight: 700;
}

.quiqqer-core-controls-breadcrumb--last-item-primary-bold .quiqqer-core-controls-breadcrumb-list-element.is-current .quiqqer-core-controls-breadcrumb-link {
    --color: var(--qui-colors-primary, currentColor);
    --color--hover: var(--qui-colors-primary, currentColor);
}
