.ping {
    min-width: 16px;
    min-height: 16px;
    aspect-ratio: 1;
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    grid-template-rows: repeat(16, 1fr);
    background: #000;
}
.scheme-dark  .ping-state-good { --ping-colour: #39e700; }
.scheme-dark  .ping-state-warn { --ping-colour: #ffbd00; }
.scheme-dark  .ping-state-poor { --ping-colour: #f70029; }
.scheme-light .ping-state-good { --ping-colour: #39bd4a; }
.scheme-light .ping-state-warn { --ping-colour: #ffc600; }
.scheme-light .ping-state-poor { --ping-colour: #ff5a73; }

.ping-background {
    grid-row: 4 / span 10;
    grid-column: 2 / span 14;
}
.scheme-dark  .ping-background { background: #000; }
.scheme-light .ping-background { background: #fff; }

.ping-colour {
    background: var(--ping-colour, #00f);
    grid-column: 2 / span 14;
}
.ping-colour-top {
    grid-row: 2;
}
.ping-colour-bottom {
    grid-row: 15;
}

.ping-antenna {
    grid-row: 5 / span 8;
    grid-column: 3 / span 3;
}
.scheme-dark  .ping-antenna { background: #b5b5b5; }
.scheme-light .ping-antenna { background: #000; }

.ping-antenna-dot {
    grid-row: 6;
    grid-column: 4;
}
.scheme-dark  .ping-antenna-dot { background: #000; }
.scheme-light .ping-antenna-dot { background: var(--ping-colour, #00f); }

.ping-antenna-over {
    grid-row: 8 / span 5;
}
.scheme-dark  .ping-antenna-over { background: #000; }
.scheme-light .ping-antenna-over { background: #fff; }

.ping-antenna-left {
    grid-column: 3;
}
.ping-antenna-right {
    grid-column: 5;
}

.ping-bar {
    grid-column-end: span 2;
}
.scheme-dark  .ping-bar { background: #525252; }
.scheme-light .ping-bar { background: #efefef; }

.scheme-dark  .ping-bar-on { background: #fff; }
.scheme-light .ping-bar-on { background: #000; }

.ping-bar-1 {
    grid-row: 11 / span 2;
    grid-column-start: 7;
}
.ping-bar-2 {
    grid-row: 8 / span 5;
    grid-column-start: 10;
}
.ping-bar-3 {
    grid-row: 5 / span 8;
    grid-column-start: 13;
}
