.cs-map-navigation {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    padding: 0;
    box-sizing: content-box;
    height: 300px;
    width: 128px;
    user-select: none;

    &-compass {
        pointer-events: auto;
        position: absolute;
        right: 10px;
        top: 10px;
        width: 128px;
        height: 128px;
        overflow: hidden;
        z-index: 9;

        &-ring {
            cursor: pointer;
            position: absolute;
            width: 128px;
            height: 128px;
            top: 0;
            transform: rotate(0rad);
            background-image: url('../assets/ring.png');

            &:active {
                background-image: url('../assets/ring_active.png');
            }

            &-center {
                width: 16px;
                height: 16px;
                position: absolute;
                top: 18px;
                left: 56px;
            }
        }
    }

    &-arrows {
        position: absolute;
        width: 128px;
        height: 128px;
        top: 10px;
        right: 10px;
        z-index: 8;
        background-image: url('../assets/compass_active.png');
        visibility: hidden;

        &-e-active,
        &-n-active,
        &-s-active,
        &-w-active {
            cursor: pointer;
            position: absolute;
            width: 24px;
            height: 24px;
            z-index: 10;
        }

        &-e-active {
            top: 62px;
            left: 62px;

            &:active {
                background-image: url('../assets/arrows_e_active.png');
            }
        }

        &-n-active {
            top: 42px;
            left: 42px;

            &:active {
                background-image: url('../assets/arrows_n_active.png');
            }
        }

        &-s-active {
            top: 82px;
            left: 42px;

            &:active {
                background-image: url('../assets/arrows_s_active.png');
            }
        }

        &-w-active {
            top: 62px;
            left: 24px;

            &:active {
                background-image: url('../assets/arrows_w_active.png');
            }
        }
    }

    &-zoom {
        position: absolute;
        width: 30px;
        height: 150px;
        background-image: url('../assets/zoom.png');
        top: 130px;
        right: 60px;
        visibility: hidden;

        &-in {
            position: absolute;
            z-index: 99;
            top: -2px;
            width: 32px;
            height: 32px;
            cursor: pointer;

            &:active {
                background-image: url('../assets/zoom_active_in.png');
            }
        }

        &-out {
            position: absolute;
            z-index: 99;
            width: 32px;
            height: 32px;
            bottom: -2px;
            cursor: pointer;

            &:active {
                background-image: url('../assets/zoom_active_out.png');
            }
        }

        &-bar {
            position: absolute;
            cursor: pointer;
            width: 32px;
            height: 32px;
            top: 65px;
            background-image: url('../assets/zoombar.png');
        }
    }

    &-angle {
        position: absolute;
        width: 128px;
        height: 128px;
        background-image: url('../assets/tilt.png');
        right: 6px;
        top: 6px;
        //visibility: hidden;

        &-bar {
            cursor: pointer;
            position: absolute;
            width: 16px;
            height: 16px;
            background-image: url('../assets/tiltbar.png');
            background-repeat: no-repeat;
            z-index: 10;
            left: 58px;
            top: 5px;
            //visibility: hidden;
        }
    }

    &:hover, &:active {
        .cs-map-navigation-arrows, .cs-map-navigation-zoom, .cs-map-navigation-angle {
            visibility: visible;
        }
    }
}