mapillary-js/styles/DirectionComponent.css

.DirectionsWrapper {
    display: block;
    position: absolute;
    width: 100%;
    height: 100px;
    bottom: 0;
    overflow: visible;
    pointer-events: none;
}

.DirectionsPerspective {
    display: block;
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 300px;
    height: 200px;
    margin-left: -150px;
}

.Directions {
    display: block;
    position: absolute;
    bottom: 50%;
    left: 50%;
}

.DirectionsCircle,
.DirectionsCircleSequence,
.DirectionsCircleDisabled,
.DirectionsCircleHighlight,
.DirectionsCircleSequenceHighlight {
    position: absolute;
    width: 68px;
    height: 68px;
    border-radius: 34px;
    top: 50%;
    left: 50%;
    margin-left: -34px;
    margin-top: -34px;
}

.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: -10;
}

.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.08%;
    pointer-events: none;
    background-size: contain;
}

.DirectionsArrowStep,
.DirectionsArrowPano {
    opacity: 1;
}

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

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

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

.TurnCircle,
.TurnCircleSequence,
.TurnCircleHighlight,
.TurnCircleSequenceHighlight {
    position: absolute;
    width: 56px;
    height: 56px;
    border-radius: 25px;
    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));
    background-size: contain;
}

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

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

.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);
    }
}