/*
 * Breadcrumbs — jedna linia; skracana jest wyłącznie bieżąca strona.
 * Dzięki temu wielokropek dziedziczy kolor bieżącej strony (#888),
 * a wcześniejsze poziomy i separatory zachowują swoje własne kolory.
 */
.breadcrumbs {
    width: 100%;
    min-width: 0;
    font-size: 1rem !important;
}

.breadcrumbs__list {
    display: flex;
    align-items: baseline;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    font-size: 1rem !important;
    line-height: inherit;
    white-space: nowrap;
    overflow: hidden;
}

.breadcrumbs__item {
    display: flex;
    align-items: baseline;
    flex: 0 0 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    font-size: 1rem !important;
    white-space: nowrap;
}

.breadcrumbs__link,
.breadcrumbs__current,
.breadcrumbs__separator {
    margin: 0;
    padding: 0;
    font-size: 1rem !important;
    white-space: nowrap;
}

/*
 * Separator ma identyczny odstęp po obu stronach, dzięki czemu
 * optycznie znajduje się dokładnie pomiędzy sąsiednimi elementami.
 */
.breadcrumbs__separator {
    display: inline-block;
    flex: 0 0 auto;
    margin: 0 0.5rem;
    color: #444 !important;
    cursor: default;
}

/* Wszystkie klikalne poziomy ścieżki. */
.breadcrumbs__link {
    display: inline-block;
    color: #444 !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

.breadcrumbs__link:hover,
.breadcrumbs__link:focus {
    color: #000 !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

/*
 * Tylko ostatni element może się zwężać. Sam separator pozostaje widoczny,
 * natomiast tekst bieżącej strony dostaje ellipsis. Ponieważ ellipsis jest
 * częścią tego elementu, ma dokładnie ten sam kolor #888.
 */
.breadcrumbs__item--current {
    flex: 1 1 auto;
    overflow: hidden;
}

.breadcrumbs__item--current .breadcrumbs__current {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #888 !important;
    cursor: default !important;
    text-decoration: none !important;
}

.breadcrumbs__item--current .breadcrumbs__current:hover,
.breadcrumbs__item--current .breadcrumbs__current:focus {
    color: #888 !important;
    cursor: default !important;
    text-decoration: none !important;
}

/* Od 1021 px breadcrumbs są nieco większe. */
@media (min-width: 1021px) {
    .breadcrumbs,
    .breadcrumbs__list,
    .breadcrumbs__item,
    .breadcrumbs__link,
    .breadcrumbs__current,
    .breadcrumbs__separator {
        font-size: 1.1rem !important;
    }
}