@media (orientation: portrait) {
    :host {
        font-size: 3vw;
    }
}

@media (orientation: landscape) {
    :host {
        font-size: 2.5vw;
    }
}

:host {
    display: block;
    /*font-weight: bold;*/
    width: 100%;
}
leaderboard-head {
    margin: 0 2px;
}
leaderboard-item {
    margin: 0 2px 4px 2px;
}
.row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
}
.row.odd {
    background-color: var(--ion-color-step-100);
}
.row.even {
    background-color: var(--ion-color-step-200);
}
.cell {
    flex-grow: 0;
    flex-shrink: 1;
    padding: 0.25em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.position {
    text-align: left;
    width: 2.65em;  /* stripe: 1.65em + 1em */
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.number {
    text-align: left;
    width: 1.65em;
}
.name {
    flex-basis: 4em;
    flex-grow: 1;
    text-align: left;
}
.code {
    flex-basis: 3em;
    flex-grow: 1;
    text-align: left;
}
.time {
    text-align: right;
    width: 6em;
}
.bestlap, .lastlap {
    text-align: right;
    width: 5em;
}
.sector1, .sector2, .sector3 {
    text-align: right;
    width: 4.5em;
}
.gap, .int {
    text-align: right;
    width: 5em;
}
.laps, .pits {
    text-align: right;
    width: 3em;
}
.fuel {
    text-align: left;
    width: 4em;
}
.status {
    text-align: left;
    width: 2em;
}

span.best {
    &.allbest {
        color: magenta;
    }
    &.notime {
        color: inherit;
    }
    &.allbest.notime {
        color: inherit;
    }
    color: #0f0;
}

span.sector {
    color: yellow !important;
}

span.title {
    font-size: 75%;
}

span.inpit {
    color: white;
    font-size: 75%;
    vertical-align: middle;
}

span.pitenter {
    color: orangered;
    font-size: 75%;
    vertical-align: middle;
}

span.pos-up {
    color: #0f0;
    font-size: 75%;
    &:before {
        content: "▲";
        display: inline-block;
        width: 1em;
    }
}

span.pos-dn {
    color: orangered;
    font-size: 75%;
    &:before {
        content: "▼";
        display: inline-block;
        width: 1em;
    }
}

span.pos-eq {
    color: white;
    font-size: 75%;
    &:before {
        content: "◀";
        display: inline-block;
        width: 1em;
    }
}

gauge {
    span {
        background: linear-gradient(to right, red, #ee0 25%, green 50%, darkGreen);
    }
}
