.deployment-stage {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    max-width: 100%;
    padding: 4px 9px;
    border: 1px solid var(--t-accent, var(--accent, #6151b7));
    border-radius: 999px;
    background: var(--t-soft, var(--accent-soft, #eeeaf8));
    color: var(--t-ink, var(--text-primary, #25232e));
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
    white-space: nowrap;
}

.topbar .deployment-stage {
    align-self: center;
}

/* In the app the badge lives under the brand in the rail. The top bar is full: the breadcrumb, the
   scope lists, search and the user menu. A badge there too pushed a long breadcrumb under the rail
   and cut record codes off at 920 pixels. The top bar copy shows only while the rail is collapsed to
   its icon strip, and it gives way before the breadcrumb does. */
.rail-stage {
    padding: 0 8px 10px;
}

.topbar .deployment-stage {
    display: none;
}

[data-rail="closed"] .rail-stage {
    display: none;
}

[data-rail="closed"] .topbar .deployment-stage {
    display: inline-block;
    flex: 0 1000 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 640px) {
    .topbar .deployment-stage {
        order: -1;
    }
}

@media (forced-colors: active) {
    .deployment-stage {
        border-color: CanvasText;
        background: Canvas;
        color: CanvasText;
    }
}