:root {
    --env-production-color: #007c3e;
    --env-staging-color: #ce483d;
    --env-development-color: #2e5ea0;
}

#pimcore_panel_tabs > .x-panel-bodyWrap > .x-tab-bar {
    &:before {
        position: absolute;
        right: 125px;
        top: -1px;
        padding: 6px 10px;
        font-weight: bold;
        color: white;
        border-radius: 5px;
    }
}

/* Production */
body[data-app-env='production'] #pimcore_panel_tabs > .x-panel-bodyWrap > .x-tab-bar:before {
    background: var(--env-production-color);
    content: 'Live-Umgebung (Production)'
}

body[data-app-env='production'] #pimcore_sidebar #pimcore_avatar,
body[data-app-env='production'] #pimcore_sidebar #pimcore_signet {
    background-color: var(--env-production-color) !important;
}

/* Staging */
body[data-app-env='staging'] #pimcore_panel_tabs > .x-panel-bodyWrap > .x-tab-bar:before {
    background: var(--env-staging-color);
    content: 'Test-Umgebung (Staging)'
}

body[data-app-env='staging'] #pimcore_sidebar #pimcore_avatar,
body[data-app-env='staging'] #pimcore_sidebar #pimcore_signet {
    background-color: var(--env-staging-color) !important;
}

/* Development */
body[data-app-env='dev'] #pimcore_panel_tabs > .x-panel-bodyWrap > .x-tab-bar:before {
    background: var(--env-development-color);
    content: 'Development'
}

body[data-app-env='dev'] #pimcore_sidebar #pimcore_avatar,
body[data-app-env='dev'] #pimcore_sidebar #pimcore_signet {
    background-color: var(--env-development-color) !important;
}