.q-breadcrumb--container {
    display: flex;
    justify-content: center;
    overflow-x: auto;
    white-space: nowrap;
    max-width: 100%;
    scrollbar-width: thin;
    scrollbar-color: var(--secondary) var(--background);
}

    .q-breadcrumb--container::-webkit-scrollbar {
        height: 8px;
        background: var(--background);
        border-radius: 4px;
    }

    .q-breadcrumb--container::-webkit-scrollbar-thumb {
        background: var(--primary);
        border-radius: 4px;
        transition: background 0.3s;
    }

        .q-breadcrumb--container::-webkit-scrollbar-thumb:hover {
            background: var(--secondary);
        }

.q-breadcrumb {
    display: flex;
    flex-wrap: nowrap;
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: 1.35rem;
    gap: .25rem .75rem;
    background: none;
    justify-content: center;
}

.q-breadcrumb--item {
    color: var(--secondary);
    background-color: transparent;
    font-size: inherit;
    display: flex;
    align-items: center;
}

    .q-breadcrumb--item a {
        text-decoration: none;
        color: inherit;
        display: flex;
        align-items: center;
    }

        .q-breadcrumb--item a:hover {
            color: var(--primary);
            cursor: pointer;
        }

    .q-breadcrumb--item i {
        margin-right: .5rem;
    }

    .q-breadcrumb--item.selected {
        color: var(--primary);
    }

    .q-breadcrumb--item + .q-breadcrumb--item::before {
        content: "›";
        color: var(--secondary);
        margin: 0 .5rem;
    }

@media (max-width: 768px) {
    .q-breadcrumb--container {
        padding: 0 0.5rem;
        justify-content: flex-start;
        overflow-x: auto;
        width: 100vw;
        box-sizing: border-box;
    }

    .q-breadcrumb {
        font-size: 1rem;
        gap: 0.15rem 0.3rem;
        flex-wrap: nowrap;
        overflow-x: auto;
        white-space: nowrap;
        width: 100%;
        min-width: 400px;
        justify-content: flex-start;
    }

    .q-breadcrumb--item {
        min-width: max-content;
        font-size: 0.98rem;
        padding: 0.2rem 0.1rem;
    }

        .q-breadcrumb--item i {
            margin-right: 0.3rem;
            font-size: 1rem;
        }

        .q-breadcrumb--item + .q-breadcrumb--item::before {
            margin: 0 0.2rem;
        }
}