:root {
    /* opt out of auto-dark-mode plugins, which break discord css, such as force-dark, dark-reader etc */
    color-scheme: only light;
}

@media all and not ((display-mode: browser) or (display-mode: fullscreen)) {
    :root {
        /* force title bar to be same as WCO bar height, regardless of zoom, device pixel ratio or OS, is only set when WCO is defined, otherwise sets to 0 */
        --custom-app-top-bar-height: env(titlebar-area-height, 0px) !important;
    }

    /* position trailing titlebar elements alongside WCO */
    [data-fullscreen] > [class*="bar_"] [class*="trailing_"] {
        padding-right: calc(100vw - env(titlebar-area-width, 100%) - env(titlebar-area-x, 0px));
    }

    /* popout windows like screenshare popout, these properties don't work outside WCO so this is safe */
    [data-popout-root="true"] {
        [class*="headerWrapper_"] {
            app-region: drag;

            /* position trailing toolbar elements alongside WCO */
            [class*="toolbar_"] {
                padding-right: calc(100vw - env(titlebar-area-width, 100%) - env(titlebar-area-x, 0px));
            }
        }
    }
}

/* force hide trailing icons when standalone so there's no ugly pixel overflow */
@media all and (display-mode: standalone) {
    [data-fullscreen] > [class*="bar_"] {
        [class*="trailing_"],
        [class*="leading"] {
            display: none;
        }
    }
}