@import "../../../../css/static/mixin";
@import "../../../../css/static/properties";

.container {
    width: 55em;
    min-width: 30em;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    background-color: #2f2f35;
    user-select: none;

    &.windowed {
        width: 100%;
        height: 100%;
    }
}

.top {
    flex-grow: 0;
    flex-shrink: 0;

    margin: 1em;
    padding: .5em;

    display: flex;
    flex-direction: row;
    justify-content: stretch;

    height: 12em;
    max-height: 12em;

    .image {
        flex-grow: 0;
        flex-shrink: 0;

        max-width: 18em;
        max-height: 11em; /* minus one padding */

        display: flex;
        flex-direction: column;
        justify-content: center;

        img {
            object-fit: contain;
            max-height: 100%;
            max-width: 100%;
        }

        margin-right: 2em;
        @include transition(.25s ease-in-out);
    }

    .stats {
        flex-shrink: 1;
        flex-grow: 1;

        min-width: 25em;

        display: flex;
        flex-direction: column;
        justify-content: space-evenly;

        .statistic {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;

            .title {
                font-size: 1.25em;
                color: var(--serverinfo-title);
                line-height: normal;

                text-transform: uppercase;
            }

            .values {
                display: flex;
                flex-direction: row;
                justify-content: space-between;

                .value {
                    font-size: 1.2em;
                    line-height: normal;
                }

                .upload {
                    color: var(--serverinfo-bandwidth-upload);
                }

                .download {
                    color: var(--serverinfo-bandwidth-download);
                }
            }

            &:not(:first-of-type) {
                margin-top: 1em;
            }
        }
    }
}

.bottom {
    flex-grow: 0;
    flex-shrink: 0;

    margin: 1em;
    padding: .5em;

    border-radius: .2em;
    border: 1px solid #1f2122;

    background-color: #28292b;

    display: flex;
    flex-direction: column;
    justify-content: stretch;

    //height: 15em;
    //max-height: 10em;

    .statistic {
        display: flex;
        flex-direction: column;
        justify-content: stretch;

        .title {
            flex-grow: 0;
            flex-shrink: 0;

            color: var(--serverinfo-statistics-title);
            font-size: 1.25em;

            text-transform: uppercase;
        }

        .body {
            flex-grow: 0;
            flex-shrink: 0;

            display: flex;
            flex-direction: row;
            justify-content: stretch;

            height: 7em;

            .canvas {
                flex-grow: 1;
                flex-shrink: 1;

                min-width: 6em;
                margin-right: 1em;
            }

            .values {
                flex-grow: 0;
                flex-shrink: 0;

                display: flex;
                flex-direction: column;
                justify-content: center;

                width: 8em;
                text-align: right;

                .upload {
                    color: var(--serverinfo-bandwidth-upload);
                }

                .download {
                    color: var(--serverinfo-bandwidth-download);
                }
            }
        }

        &:not(:first-of-type) {
            margin-top: 1.5em;
        }
    }
}

@media all and (max-width: 43em) {
    .top .image {
        margin: 0!important;
        max-width: 0!important;
    }
}