@import "styles/base.scss";

.server-location-card {

    max-width: 515px; 
    display: inline-block;

    .grade-good {
        background-color: $good;
    }
    .grade-fair {
        background-color: $fair;
    }
    .grade-bad {
        background-color: $bad;
    }
    
    td {
        text-align: right;
    }
    
    [header] {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;

        .location-name {
            font-size: 2rem;
            font-weight: 500;
            line-height: 1.2;
        }

        .server-name {
            font-size: 0.75rem;
            line-height: 2;
        }
    }

    
    [body] {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
    }

    [footer] {
        display: flex;
        flex-direction: column;
        justify-content: baseline;

        .location-inputs {
            text-align: right;
            margin-top: 15px;
        }

        .divider {
            margin-bottom: 15px;
            border-bottom: 1px solid #d8dfe6;
        }

        .results {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;

            .positive {
                background-color: $bad;
            }
            .negative {
                background-color: $good;
            }

            .overflow {
                color: $bad;
            }
        }
    }
}