@import "/UI/Styles/Theme.scss";

ServerBrowser
{
    width: 100%;
    height: 100%;
    flex-grow: 1;
    flex-direction: row;
    gap: 64px;

    .list
    {
        flex-basis: 70%;
        flex-direction: column;
        background-color: rgba( black, 0.35 );
        backdrop-filter: $blur;

        > .header
        {
            background-color: rgba( black, 0.35 );
            padding: 10px 16px;
            gap: 64px;
            width: 100%;
            flex-direction: row;
            border-radius: 2px;
            flex-shrink: 0;
        }
    }

    .current
    {
        background-color: rgba( black, 0.35 );
        flex-grow: 1;
        flex-direction: column;
        backdrop-filter: $blur;

        > .header
        {
            background-color: rgba( black, 0.35 );
            padding: 10px 16px;
            gap: 64px;
            width: 100%;
            flex-direction: row;
            border-radius: 2px;
            flex-shrink: 0;
            justify-content: flex-start;
        }
    }

    .servers
    {
        border-radius: 2px;
        flex-direction: column;
        overflow-y: scroll;
        overflow-x: hidden;
        max-height: 100%;
        mask-mode: alpha;
    }
}