
/* [Start] = Flashcord Beta == Major General Modifications [00] OTUI_Base CSS = */

[class^="peopleList_"] {
    container-name: var(--FlashCore-Friends, FC-FlexGrid);
    container-type: inline-size;
}
#rp-plugins-tab, #rp-themes-tab {
    container-name: var(--FlashCore-Replugged_Addons, FC-FlexGrid);
    container-type: inline-size;
}
[class^="userPopoutOverlayBackground-"]:has([class^="role_"]) {
    container-name: var(--FlashCore-UPFG, FC-FlexGrid);
    container-type: inline-size;
}

@container FC-FlexGrid (min-width: 0px) {
    [class^="peopleList_"] > div,
    [class="replugged-addon-cards"],
    [class^="section_"]:nth-child(4) {
        display: flex;
        flex-wrap: wrap;
        align-content: center;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 95%;
        margin: auto;
    }
    [class^="role_"],
    [class^="peopleListItem_"],
    [class="replugged-addon-card"] {
        margin: 0;
        min-width: 386px;
        min-height: 64px;
        flex-grow: 1;
        flex-basis: 1px;
        padding: 8px;
        transition: var(--Flashcord-AnimMult-Normal, 250ms);
        border-radius: var(--Flashcord-Border_Radius, 25px );
        scale: 0.95;
      }
    [class^="role_"]:hover,
    [class^="peopleListItem_"]:hover,
    [class="replugged-addon-card"]:hover {
        margin: 0 !important;
        padding: 8px !important;
        scale: 1.05;
        transition: var(--Flashcord-AnimMult-Normal, 250ms);
        border-radius: var(--Flashcord-Border_Radius, 25px );
    }
    [class^="role_"] {
        min-width: fit-content !important;
        min-height: 24px !important;
        border-radius: 0px !important;
        scale: 1 !important;
    }
    h2 { width: 100%; }
}

/*
[class^="wrapper-"]:has([class^="callContainer-"]) {
    container-name: var(--FlashCore-Call, FC-Call);
    container-type: inline-size;
}

@container FC-Call (min-width: 0px) {
    [class^="topControls-"], [class^="bottomControls-"] { opacity: 1 !important; transform: none !important;}
    .custom-background-theme [class^="callContainer-"] { background: transparent; }
    button { pointer-events: all; }
    [class^="bottomControls-"] [class^="flex-"] {
        position: absolute;
        width: 100%;
        height: 100%;
        pointer-events: none;
    }
    [class^="bottomControls-"] [class^="flex-"]:nth-child(2) {
        justify-content: start;
        align-items: flex-end;
    }
    [class^="bottomControls-"]  { height: 100%; display: block !important; }

    // Camera 
    [class^="bottomControls-"] [class^="flex-"]:nth-child(2) [class^="wrapper-"] > [class^="controlButton-"]:nth-of-type(1) {
        position: absolute;
        top: -24px;
        left: -8px;
        scale: 0.8;
        margin: 0;
    }
    // Activity
    [class^="bottomControls-"] [class^="flex-"]:nth-child(2) [class^="wrapper-"] > div:nth-of-type(3) {
        position: absolute;
        top: -24px;
        left: 34px;
        scale: 0.8;
        margin: 0;
    }

    // ScreenShare
    [class^="bottomControls-"] [class^="flex-"]:nth-child(2) [class^="wrapper-"] > div:nth-of-type(4) {
        position: absolute;
        bottom: 64px;
        left: 56px;
        margin: 0;
    }

    // Mic
    [class^="bottomControls-"] [class^="flex-"]:nth-child(2) [class^="wrapper-"] > div:nth-of-type(5) {
        margin: 0;
    }
    // Soundboard
    [class^="voiceEffectsActionBar-"] { 
        position: absolute;
        bottom: 64px;
        left: 0;
        width: 56px;
        height: 56px;
        background: var(--primary-130);
        justify-content: center;
        align-items: center;
        border-radius: 6948px;
    }
    [class^="voiceEffectsActionBar-"]:hover { background: var(--primary-230); }
    [class^="voiceEffectsActionBar-"] button {
        margin: 0;
        width: 56px;
        height: 56px;
    }
    [class^="voiceEffectsActionBar-"] svg { color: black !important; }
    [class^="leftDivider-"] { display: none; }

    // Xbox
    [class^="bottomControls-"] [class^="flex-"]:nth-child(1) > div:last-of-type { 
        position: absolute;
        top: -24px;
        left: 92px;
        width: 56px;
        height: 56px;
        background: var(--primary-130);
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 6948px;
        scale: 0.8;
    }
    [class^="bottomControls-"] [class^="flex-"]:nth-child(1) > div:last-of-type:hover { background: var(--primary-230); }
    [class^="bottomControls-"] [class^="flex-"]:nth-child(1) > div:last-of-type button {
        margin: 0;
        width: 56px;
        height: 56px;
    }
    [class^="bottomControls-"] [class^="flex-"]:nth-child(1) > div:last-of-type svg { color: black !important; }

    //  PIP
    [class^="bottomControls-"] [class^="flex-"]:nth-child(3) > div:nth-of-type(1) { 
        position: absolute;
        top: 28px;
        left: 42px;
        width: 56px;
        height: 56px;
        background: var(--primary-130);
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 6948px;
        scale: 0.8;
    }
    [class^="bottomControls-"] [class^="flex-"]:nth-child(3) > div:nth-of-type(1):hover { background: var(--primary-230); }
    [class^="bottomControls-"] [class^="flex-"]:nth-child(3) > div:nth-of-type(1) button {
        margin: 0;
        width: 56px;
        height: 56px;
    }
    [class^="bottomControls-"] [class^="flex-"]:nth-child(3) > div:nth-of-type(1) svg { color: black !important; }

    // Fullscreen
    [class^="bottomControls-"] [class^="flex-"]:nth-child(3) > div:nth-of-type(2) { 
        position: absolute;
        top: 28px;
        left: -8px;
        width: 56px;
        height: 56px;
        background: var(--primary-130);
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 6948px;
        scale: 0.8;
    }
    [class^="bottomControls-"] [class^="flex-"]:nth-child(3) > div:nth-of-type(2):hover { background: var(--primary-230); }
    [class^="bottomControls-"] [class^="flex-"]:nth-child(3) > div:nth-of-type(2) button {
        margin: 0;
        width: 56px;
        height: 56px;
    }
    [class^="bottomControls-"] [class^="flex-"]:nth-child(3) > div:nth-of-type(2) svg { color: black !important; }

    [class^="leftDivider-"] { display: none; }
    [class^="gradient"] { display: none; }
}
*/

/* [END] = Flashcord Beta == Major General Modifications [00] OTUI_Base CSS = */
