/* Chevron-style breadcrumb pills, overriding Filament's default .fi-breadcrumbs-* markup. */

.fi-breadcrumbs-list {
    gap: 0;
}

.fi-breadcrumbs-item {
    position: relative;
}

.fi-breadcrumbs-item-separator {
    display: none;
}

.fi-breadcrumbs-item-label {
    display: inline-flex;
    align-items: center;
    height: 2.25rem;
    padding-inline: 1.25rem 1.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    background-color: rgb(219 234 254);
    color: rgb(37 99 235);
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.fi-breadcrumbs-item:first-child .fi-breadcrumbs-item-label {
    padding-inline-start: 1rem;
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
}

.fi-breadcrumbs-item:not(:first-child) {
    margin-inline-start: -14px;
}

.fi-breadcrumbs-item:nth-child(1) { z-index: 1; }
.fi-breadcrumbs-item:nth-child(2) { z-index: 2; }
.fi-breadcrumbs-item:nth-child(3) { z-index: 3; }
.fi-breadcrumbs-item:nth-child(4) { z-index: 4; }
.fi-breadcrumbs-item:nth-child(5) { z-index: 5; }
.fi-breadcrumbs-item:nth-child(6) { z-index: 6; }

a.fi-breadcrumbs-item-label:hover {
    background-color: rgb(191 219 254);
}

.fi-breadcrumbs-item:last-child .fi-breadcrumbs-item-label {
    background-color: rgb(37 99 235);
    color: #fff;
}

.dark .fi-breadcrumbs-item-label {
    background-color: rgb(30 58 138 / 0.4);
    color: rgb(147 197 253);
}

.dark a.fi-breadcrumbs-item-label:hover {
    background-color: rgb(30 58 138 / 0.6);
}

.dark .fi-breadcrumbs-item:last-child .fi-breadcrumbs-item-label {
    background-color: rgb(37 99 235);
    color: #fff;
}