$error: #BF616A;
$warning: #d47050;

$background: #171819;
$control: #38393c;
$control-dark: #262728;
$control-light: #636363;
$control-label: #dbdee9;
$control-text: #ccc;
$control-highlight: #3793c8;

$client: #f3d234;
$server: #3793c8;


$blue: #3793c8;
$green: #75b741;
$yellow: #b69a2c;

DeveloperMode
{
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: 0px;
    left: 0px;
    pointer-events: none;
    font-family: Roboto Mono;
    font-size: 11px;
    color: white;
    align-items: stretch;
    display: none;
    padding: 5%;
    gap: 10px;

    &.open
    {
        pointer-events: all;
        display: flex;
        background-image: linear-gradient( to bottom, #222f, #222e, #222f );
    }
}

DeveloperMode > .left
{
    width: 300px;
    flex-direction: column;
    justify-content: flex-end;
    gap: 5px;
}

DeveloperMode > .center
{
    flex-grow: 1;
}

DeveloperMode > .right
{
    width: 400px;
    flex-direction: column;
}

.popup-panel
{
    .button
    {
        background-color: $control;

        &:nth-child( even )
        {
            background-color: rgba( $control, 0.8 );
        }

        &:hover, &.active
        {
            background-color: $blue;


            &:nth-child( even )
            {
                background-color: rgba( $blue, 0.8 );
            }
        }

        .iconpanel
        {
            color: white;
            opacity: 0.2;
            margin-right: 10px;
        }
    }
}