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,
.DirectionsCircleDisabled {
    position: absolute;
    width: 68px;
    height: 68px;
    border-radius: 34px;
    top: 50%;
    left: 50%;
    margin-left: -34px;
    margin-top: -34px;
}

.DirectionsCircle {
    background: rgba(0, 0, 0, 0.25);
    pointer-events: all;
    cursor: pointer;
    cursor: hand;
}

.DirectionsCircleDisabled {
    background: rgba(0, 0, 0, 0.1);
    pointer-events: none;
    z-index: -10;
}

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

.DirectionsArrowStep,
.DirectionsArrowPano,
.DirectionsArrowDisabled {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -4px;
    margin-top: 4px;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    pointer-events: none;
}

.DirectionsArrowStep,
.DirectionsArrowPano {
    opacity: 1;
}


.DirectionsArrowStep,
.DirectionsArrowDisabled {
    border-right: 10px solid white;
    border-top: 10px solid white;
}

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


.DirectionsArrowPano {
    border-right: 10px solid wheat;
    border-top: 10px solid wheat;
}

.TurnLeft,
.TurnRight,
.TurnAround {
    opacity: 0.8;
    position: absolute;
    height: 54px;
    width: 54px;
    cursor: pointer;
    cursor: hand;
    pointer-events: all;
}

.TurnLeft,
.TurnRight {
    filter: drop-shadow(0px 2px 1px rgba(0, 0, 0, 0.8));
}

.TurnAround {
    filter: drop-shadow(-2px 0px 1px rgba(0, 0, 0, 0.8));
}

.TurnLeft:hover,
.TurnRight:hover,
.TurnAround:hover {
    opacity: 1;
}

.TurnLeft {
   left: 0px;
   top: 5px;
   background: url(./arrow-left.svg);
   background-size: contain;
}

.TurnRight {
    right: 0px;
    top: 5px;
    background: url(./arrow-left.svg);
    background-size: contain;
    transform: scaleX(-1);
}

.TurnAround {
    left: 0px;
    bottom: 5px;
    background: url(./arrow-left.svg);
    background-size: contain;
    transform: rotateZ(270deg) scale(1.15, 1.15);
}