Trilium/apps/client/src/widgets/BreadcrumbBadges.css

.component.breadcrumb-badges {
    contain: none;
}

.breadcrumb-badges {
    display: flex;
    gap: 5px;

    .breadcrumb-badge {
        display: flex;
        align-items: center;
        padding: 2px 6px;
        border-radius: 12px;
        font-size: 0.75em;
        background-color: var(--color, --badge-background-color);
        color: white;
        min-width: 0;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;

        &.clickable {
            cursor: pointer;

            &:hover {
                background-color: color-mix(in srgb, var(--color, --badge-background-color) 80%, black);
            }
        }

        &.temporarily-editable-badge { --color: #4fa52b; }
        &.read-only-badge { --color: #e33f3b; }
        &.share-badge { --color: #3b82f6; }
        &.backlinks-badge { color: var(--badge-text-color); }

        a {
            color: inherit;
            text-decoration: none;
        }
    }

    .dropdown {
        &.dropdown-backlinks-badge .dropdown-menu {
            min-width: 500px;
        }

        .btn {
            border: 0;
            margin: 0;
            padding: 0;
        }
    }
}