#map-window {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

#map-window > * {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
}

#map-widget {
}

#map-overlay {
    position: relative;
    background: radial-gradient(
            circle,
            rgba(0, 0, 0, 0) 0%,
            rgba(.2, .2, .2, 0.3) 60%,
            rgba(.2, .2, .2, 0.6) 100%
    );
    pointer-events: none;
}

#map-crosshairs {
    width: 12px;
    height: 12px;

    --svg: url("../svg/crosshairs.svg");

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    background-color: currentColor;

    -webkit-mask-image: var(--svg);
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;

    mask-image: var(--svg);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}

#map-panel {
    width: 100%;
}

.map-marker {
    cursor: pointer;
}

.map-marker:hover {
    opacity: 1 !important;
}

.map-marker > * {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.marker-icon {
    width: 24px;
    height: 24px;

    background-image: var(--svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent; /* important */
}

.marker-bearing {
    width: 40px;
    height: 40px;
    transform: translate(-50%, -50%) rotate(var(--bearing));

    background-image: url(../svg/bus-direction.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent; /* important */

    transition: transform 1000ms ease-out;
}

.map-event-panel {
    display: grid;
    gap: var(--unit-spacing);
    grid-template-columns: 1fr; /* small screens */
    align-items: start;
}

@media (min-width: 48rem) {
    .map-event-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* no need for column/break hacks */
.map-panel-card {
    margin: 0;
}

.map-panel-card-grid {
    width: 100%;
    display: grid;
    grid-template-columns: 3rem 1fr 3rem 3rem;
    gap: var(--unit-spacing);
}

.map-panel-card-heading {
    grid-column: 1 / 2;
}