:host(race-track) {
    text-align: left;
    background: white;
    padding: 10px;
    border-radius: 3px;

    font-size: 18px;
    --row-height: 50px;

    --race-length: 0;
    --position: 0;
    --move-duration: 250ms;
}

:host(race-track.horizontal) {
    width: 100%;
}

:host(race-track.vertical) {
    min-height: 500px;
}

:host(race-track-row.horizontal) {
    height: var(--row-height);
}
:host(race-track-row.vertical) {
    width: var(--row-height);
}

.name, .placement {
    display: flex;
    align-items: center;
}

:host(.horizontal) .name,
:host(.horizontal) .placement {
    padding: 5px 10px;
}

:host(.vertical) .name,
:host(.vertical) .placement {
    padding: 10px 5px;
}

.name {
    white-space: nowrap;
    justify-content: flex-end;
}

:host([highlighted]) .name {
    font-weight: 500;
}

:host(.vertical) .name {
    writing-mode: vertical-lr;
}

.placement {
    justify-content: center;
    font-weight: 500;
    box-sizing: border-box;
}

:host(.horizontal) .placement {
    min-width: var(--row-height);
}

:host(.vertical) .placement {
    min-height: var(--row-height);
}

.placement::after {
    content: '.';
}

.placement:empty::after {
    content: '';
}

:host([noplacement]) .placement {
    display: none;
}

.track, .goal {
    line-height: 0;
}

.track .avatar {
    width: var(--row-height);
    height: var(--row-height);

    position: relative;
    z-index: 1;
    --progress: calc(var(--position) / var(--race-length) * 100% + 2px);
    transition-duration: var(--move-duration);
    transition-timing-function: ease-in-out;
}

:host(.horizontal) .track .avatar {
    left: var(--progress);
    transition-property: left;
}

:host(.vertical) .track .avatar {
    top: var(--progress);
    transition-property: top;
}

.goal {
    box-sizing: content-box;
}

:host(.horizontal) .goal {
    width: var(--row-height);
    border-left: 2px dashed var(--gray);
}

:host(.vertical) .goal {
    height: var(--row-height);
    border-top: 2px dashed var(--gray);
}

.track, .goal {
    background-color: var(--lightGray);
}

:host([highlighted]) .track, :host([highlighted]) .goal {
    background-color: var(--lightGrayHover);
}

.track, .goal {
    position: relative;
}

.track::after, .goal::after {
    position: absolute;
    inset: 0;
    content: '';
    opacity: 0;
}

.track::after, .goal::after {
    background-color: var(--faintGreen);
}

:host([highlighted]) .track::after, :host([highlighted]) .goal::after {
    background-color: var(--green);
}

:host([placement]) .track::after,
:host([placement]) .goal::after,
:host([victory]) .goal::after {
    animation: blink-appear 650ms ease-in-out;
    animation-fill-mode: forwards;
    animation-delay: var(--move-duration);
}

:host([victory]) .goal::after {
    background-color: var(--faintRed);
    border: 2px solid var(--redHover);
}

:host([highlighted][victory]) .goal::after {
    background-color: var(--faintGreen);
    border-color: var(--greenHover);
}

@keyframes blink-appear {
    0%, 66% {
        opacity: 0;
    }
    33%, 100% {
        opacity: 1;
    }
}

@supports (grid-template-columns: subgrid) {
    :host(race-track) {
        display: grid;
        --grid-template: auto 1fr auto auto;
    }

    :host(race-track.horizontal) {
        grid-template-columns: var(--grid-template);
    }

    :host(race-track.vertical) {
        grid-template-rows: var(--grid-template);
    }

    :host(race-track-row) {
        display: grid;
    }

    :host(race-track-row.horizontal) {
        grid-column: 1 / 5;
        grid-template-columns: subgrid;
    }

    :host(race-track-row.vertical) {
        grid-row: 1 / 5;
        grid-template-rows: subgrid;
    }
}

/* FALLBACK */
@supports not (grid-template-columns: subgrid) {
    :host(race-track) {
        display: flex;
        flex-direction: column;
    }

    :host(race-track.vertical) {
        flex-direction: row;
    }

    :host(race-track-row) {
        display: flex;
        flex-direction: row;
    }

    :host(race-track-row.vertical) {
        flex-direction: column;
    }

    .name {
        flex: 0 0 180px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .track {
        flex: 1 1 auto;
    }

    .goal {
        flex: 0 0 auto;
    }

    .placement {
        flex: 0 0 auto;
    }
}