@property --FCM-Inbox {
    syntax: 'on | off';
    inherits: true;
    initial-value: on;
}

[class^="notAppAsidePanel_"] > [class^="layerContainer_"] [id^="popout_"]:has([role="dialog"] > div [class^="inboxIcon_"]) {
    container: FCM-Inbox / normal;
}

@container FCM-Inbox style(--FCM-Inbox: on) {
    /* General Appearance */
    [role="dialog"] {
        position: fixed;
        top: -36px; left: -48px;
        width: 100vw; height: 100vh;

        display: flex;
        justify-content: center; align-items: center;

        pointer-events: none;
        
        transition: opacity var(--SNDL-Transition_Fast);
        animation: SNDL-Fade_In var(--SNDL-Animation_Slow);

        > div {
            width: 90vw; height: 80vh;
            max-width: none; max-height: none;
            pointer-events: all;
            border-radius: var(--SNDL-UI_Border-Radius);
        }
        > div > :is([class^="container_"], [class^="messagesPopout_"]) {
            animation: SNDL-Fade_In var(--SNDL-Animation_Fast);
        }
    }

    [class^="header_"] {
        display: flex;
        align-items: center;
        padding: 0 30px;

        [class^="headerTitle_"] {
            align-items: center;
            min-width: 200px;
        }
        [class^="headerTabs_"] {
            margin-left: 8px;
             [class^="tabBar_"] {
                margin-top: 0;
                [class^="tab_"] {
                    padding: var(--SNDL-UI_Padding);
                }
             }
        }
    }
}