@import '@fortawesome/fontawesome-free/css/all.css';

$background-base: #454545;
$foreground-base: #9c9c9c;
$background-z1: #333333;
$foreground-z1: #b5b5b5;
$background-z2: #252525;
$foreground-z2: #b5b5b5;

$color-danger: #c32222;
$color-info: #0374a8;
$color-success: #008000;
$color-warning: #d99b0b;

html, body {
    margin: 0;
    padding: 0;
    /* width: 100%;
    height: 100%; */
    font-family: monospace;
    overflow: hidden;
    font-family: 'Kufam', 'Courier new', 'monospace';
}

body {
    // margin: 10px;
    background-color: $background-base;
    color: $foreground-base;
}

.app-info {
    position: absolute;
    top: 15px;
    left: 10px;
    left: max(env(safe-area-inset-left, 10px), 10px);

    h1 {
        font-size: 14px;
        margin: 0;
        color: $foreground-base;
    }
    .version {
        display: block;
        font-size: 9px;
    }
}

.statusline {
    position: absolute;
    display: flex;
    bottom: 0;
    left: 0;
    height: 40px;
    /* padding-left: 5px; */
    width: calc(100%);
    font-size: 12px;
    margin: 0;
    align-items: center;

    background-color: $background-z1;
    i {
        font-size: 14px;
        margin-right: 5px;
    }

    &-item {
        display: none;
        align-items: flex-start;
        margin-left: 5px;
        margin-right: 5px;
        font-size: 13px;

        color: $foreground-z1;

        .connected & { display: flex; }
    }

    &-item:first-child {
        margin-left: 10px;
        margin-left: calc(env(safe-area-inset-left) + 10px);
    }

    &-item:last-child {
        margin-right: 10px;
        margin-right: calc(env(safe-area-inset-right) + 10px);
    }
}

.connection {
    display: flex;
    color: $color-danger;

    &:after {
        display: block;
        content: "DISCONNECTED";
    }

    .connected & { color: $color-success; }
    .connected &:after {
        display: block;
        content: "CONNECTED";
    }
}

.arm {
    color: $color-danger;

    &:after {
        content: 'DISARMED';
        display: block;
    }

    .armed & {color: $color-success; }
    .armed &:after {
        content: 'ARMED';
        display: block;
    }
}

.ping {
    margin-left: auto;

    i {
        -webkit-animation: ping-fade-out 2s forwards; /* Safari 4+ */
        -moz-animation:    ping-fade-out 2s forwards; /* Fx 2+ */
        -o-animation:      ping-fade-out 2s forwards; /* Opera 12+ */
        animation:         ping-fade-out 2s forwards; /* IE 10+, Fx 29+ */
    }

    @-webkit-keyframes ping-fade-out {
      0%   { opacity: 1; }
      100% { opacity: 0; }
    }
}

.acc-string {
    display: none;
    position: absolute;
    top: 60px;
    left: calc(50% - 50px - 10px);
    width: 100px;
    text-align: center;
    background-color: #272727;
    padding: 0 10px;
    border-radius: 10px;
    font-size: 9px;

    .connected & { display: block; }
}

.button-center {
    position: absolute;
    display: none;
    margin-top: 5px;
    border: none;
    background-color: $background-z1;
    color: $foreground-z1;
    padding: 10px;
    width: 140px;
    height: 40px;
    left: calc(50% - 70px);
    font-weight: 400;
    font-size: 15px;

    .armed & { display: block; }
    &-top    { top: 10px; }
    &-bottom { bottom: 50px; }
}

#btn_connect { display: block; }
.connected #btn_connect { display: none; }
.connected #btn_disconnect { display: block; }
.connected #btn_arm { display: block; }
.armed #btn_arm { display: none; }

#btn_connect, #btn_disconnect {
    text-shadow: 0 0 5px #c3c3c3, 0 0 10px #636363;
}
#btn_arm, #btn_disarm {
    color: red;
    text-shadow: 0 0 5px #c53f3f, 0 0 10px #c53f3f;
}
#btn_disarm{
    color: #00ff15;
    text-shadow: 0 0 5px #11b91f, 0 0 10px #297b30;
}

.joystick {
    position: absolute;
    width: 200px;
    height: 200px;
    top: calc(50% - 100px - 10px); /* 50% - half height - statusline height */
    /* border: 1px solid pink; */

    &-left  { left: calc(25% - 100px); }
    &-right { left: calc(75% - 100px); }
}


.landscape-warning {
    display: none;
    position: absolute;
    z-index: 9999999;
    width: 100%;
    height: 100%;
    padding-top: 50%;
    background-color: $background-base;
    text-align: center;

    &-content {
        position: relative;
        top: -50px;
    }
    i { font-size: 5em; }
    h1 {
        font-size: 1em;
        margin: 10px;
    }
    button {
        border: none;
        background-color: $background-z1;
        color: $foreground-z1;
        padding: 10px;
        width: 140px;
        height: 40px;
    }

    .ignore-landscape-warning & { display: none !important; }
}

@media screen and (orientation:portrait) {
    .landscape-warning {
        display: block;
    }
}

.notification {
    background-color: $background-z2;
    color: $foreground-z2;
    overflow: hidden;
    display: flex;
    align-items: baseline;

    &-area {
        height: 100%;
        width: 100%;
        overflow: hidden;
        margin-left: 5px;
        margin-right: 5px;

        -webkit-animation: fade-in 0.5s linear; /* Safari 4+ */
        -moz-animation:    fade-in 0.5s linear; /* Fx 2+ */
        -o-animation:      fade-in 0.5s linear; /* Opera 12+ */
        animation:         fade-in 0.5s linear; /* IE 10+, Fx 29+ */
    }

    &-content {
        margin-left: 5px;
        margin-right: 5px;
        width: 100%;
        overflow: hidden;
    }

    i {
        margin-left: 5px;
        margin-right: 5px;
    }

    i.alert   { color: $color-danger; }
    i.info    { color: $color-info; }
    i.success { color: $color-success; }
    i.warning { color: $color-warning; }

    p {
        width: max-content;
        -webkit-animation: scroll-text 5s linear; /* Safari 4+ */
        -moz-animation:    scroll-text 5s linear; /* Fx 2+ */
        -o-animation:      scroll-text 5s linear; /* Opera 12+ */
        animation:         scroll-text 5s linear; /* IE 10+, Fx 29+ */
    }

    @-webkit-keyframes scroll-text {
      0%   { margin-left: 100%; }
      100% { margin-left: -100%; }
    }

    @-webkit-keyframes fade-in {
      0%   { opacity: 1; }
      100% { opacity: 0; }
    }
}