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

$main-font: Poppins;

$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 "Colors.scss";
@import "Text.scss";
@import "Layout.scss";
@import "Buttons.scss";
@import "Containers.scss";
@import "Hud.scss";
@import "Hints.scss";
@import "InputHints.scss";
@import "MarkerSystem.scss";
@import "DamageIndicator.scss";
@import "MenuSystem.scss";
@import "Controls.scss";
@import "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;
    }
}