mapillary-js/styles/DirectionComponent.css

.DirectionsPerspective {
    display: block;
    position: absolute;
    pointer-events: none;
    transform-style: preserve-3d;
}

.DirectionsCircle,
.DirectionsCircleSequence,
.DirectionsCircleDisabled,
.DirectionsCircleHighlight,
.DirectionsCircleSequenceHighlight {
    position: absolute;
    border-radius: 50%;
}

.DirectionsCircle,
.DirectionsCircleSequence,
.DirectionsCircleHighlight,
.DirectionsCircleSequenceHighlight {
    pointer-events: all;
}

.DirectionsCircle:hover,
.DirectionsCircleSequence:hover,
.DirectionsCircleHighlight:hover,
.DirectionsCircleSequenceHighlight:hover {
    cursor: pointer;
    cursor: hand;
}

.DirectionsCircle,
.DirectionsCircleSequence {
    background: rgba(0, 0, 0, 0);
}

.DirectionsCircleDisabled {
    background: rgba(0, 0, 0, 0);
    z-index: -1;
}

.DirectionsCircleHighlight,
.DirectionsCircleSequenceHighlight {
    background: rgba(0, 0, 0, 0.4);
}

.DirectionsArrowStep,
.DirectionsArrowPano,
.DirectionsArrowDisabled {
    position: absolute;
    top: 44%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 75%;
    height: 44.0775%;
    pointer-events: none;
}

.DirectionsArrowStep,
.DirectionsArrowDisabled {
    background: url(./pointer-white.svg);
}

.DirectionsArrowDisabled {
    opacity: 0.2;
    z-index: -1;
}

.DirectionsArrowPano {
    background: url(./pointer-wheat.svg);
}

.TurnCircle,
.TurnCircleSequence,
.TurnCircleHighlight,
.TurnCircleSequenceHighlight {
    position: absolute;
    border-radius: 50%;
    pointer-events: all;
}

.TurnCircle,
.TurnCircleSequence {
    background: rgba(0, 0, 0, 0);
}

.TurnCircleHighlight,
.TurnCircleSequenceHighlight {
    background: rgba(0, 0, 0, 0.4);
}

.TurnCircle:hover,
.TurnCircleSequence:hover,
.TurnCircleHighlight:hover,
.TurnCircleSequenceHighlight:hover {
    cursor: pointer;
    cursor: hand;
}

.TurnLeft,
.TurnRight,
.TurnAround {
    position: absolute;
    top: 50%;
    pointer-events: none;
    filter: drop-shadow(0px 2px 1px rgba(0, 0, 0, 0.8));
}

.TurnLeft,
.TurnRight {
    width: 58.794%;
    height: 70%;
}

.TurnAround {
    left: 50%;
    width: 75%;
    height: 63.2475%;
}

.TurnLeft {
    left: 45%;
    background: url(./turn.svg);
    transform: translate(-50%, -50%);
}

.TurnRight {
    left: 55%;
    background: url(./turn.svg);
    transform: translate(-50%, -50%) scaleX(-1);
}

.TurnAround {
    background: url(./turn-around.svg);
    transform: translate(-50%, -50%);
}

@media (hover: hover) {
    .DirectionsCircle:hover,
    .DirectionsCircleSequence:hover {
        background: rgba(0, 0, 0, 0.4);
    }

    .TurnCircle:hover,
    .TurnCircleSequence:hover {
        background: rgba(0, 0, 0, 0.4);
    }
}

.PanoIndication {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 32px;
    height: 24px;
    background: url(./pano-icon.svg);
    background-size: contain;
    opacity: 0.8;
}