.three-pl-environment-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 3px 10px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font: 800 11px/1.2 Inter, ui-sans-serif, system-ui, sans-serif;
    letter-spacing: .08em;
    white-space: nowrap;
}

.three-pl-environment-badge--live {
    background: #e7f3ed;
    color: #0c513b;
}

.three-pl-environment-badge--test {
    background: #fff2cc;
    color: #795500;
}

.three-pl-environment-badge--unconfigured {
    background: #fff0ee;
    color: #b42318;
}

.three-pl-environment-badge--desk {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 1000;
    box-shadow: 0 4px 18px rgb(0 0 0 / 15%);
    pointer-events: none;
}

.three-pl-environment-badge--login {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 1000;
    box-shadow: 0 4px 18px rgb(0 0 0 / 15%);
    pointer-events: none;
}

.three-pl-environment-badge--portal {
    flex: none;
}

body[data-three-pl-environment="test"] .site-header {
    border-top: 4px solid #c78c00;
}

body[data-three-pl-environment="test"] .site-header .brand-mark {
    background: #946900;
}

body[data-three-pl-environment="unconfigured"] .site-header {
    border-top: 4px solid #b42318;
}