//Holds all of our stylesheets. Putting "@import "Theme.scss" will allow use of everything.

$safe-zone-x: 32px;
$safe-zone-y: 32px;

$main-color: #ffc300; // todo: delete
$main-color-dark: #393d4c; // todo: delete
$theme-color: #D7D9D7; // todo: delete

$border: rgba(128,128,128,0.16);
$rounding: 12px;

$terror-color: #D71920;
$counter-terror-color: #08B2E3;
$unassigned-color: #808080;

$blur: blur( 50px );

@import "/UI/Core/Styles/Typography.scss";
@import "/UI/Core/Styles/Colors.scss";
@import "/UI/Core/Styles/TeamRoles.scss";
@import "/UI/Core/Styles/Motion.scss";
@import "/UI/Core/Styles/PrimitiveTokens.scss";
@import "/UI/Core/Styles/SurfaceTokens.scss";
@import "/UI/Core/Styles/UIDomains.scss";
@import "/UI/Core/Styles/MenuPrimitives.scss";
@import "/UI/Core/Styles/Text.scss";
@import "/UI/Core/Styles/Layout.scss";
@import "/UI/Core/Styles/Buttons.scss";
@import "/UI/Core/Styles/Containers.scss";
@import "/UI/Core/Styles/Hud.scss";
@import "/UI/Core/Styles/Hints.scss";
@import "/UI/Core/Styles/InputHints.scss";
@import "/UI/Core/Styles/MarkerSystem.scss";
@import "/UI/Core/Styles/MenuSystem.scss";
@import "/UI/Core/Styles/Controls.scss";
@import "/UI/Core/Styles/Widgets.scss";

canvas {
    width: 100%;
    height: 100%;
    max-width: 1920px;
    max-height: 1080px;
    justify-content: center;
    align-items: center;
    color: $text-color;
}

canvas
{
    > .right
    {
        top: 0;
        position: absolute;
        right: 0;
        height: 100%;
        flex-direction: column;
        padding-bottom: 100px;
    }

    .flex-grow
    {
        flex-grow: 1;
    }
}

.hidden {
    opacity: 0;
    transition: opacity 150ms ease;

    &.visible {
        opacity: 1;
    }
}

.hidden-no-transition {
    opacity: 0; 

    &.visible-no-transition {
        opacity: 1;
    }
}