%navbar {
    position: absolute;
    text-align: right;
    min-width: 50px;
    cursor: pointer;
    -webkit-filter: drop-shadow(0 0 6px rgba(0,0,0,.3));
    filter: drop-shadow(0 0 6px rgba(0,0,0,.3));
    top: 20px;

    svg {
        transition: ease 0.2s;
        font-size: calc(10px + 1.5vmin) !important;
    }

    &:hover {
        svg {
            transform: scale(1.1);
            color: map-get($theme-colours, "main");;
        }
    }
}

.navbar1 {
    @extend %navbar;
    right: 20px;
    svg {
        -webkit-backface-visibility: hidden;
        -webkit-transform: translateZ(0) scale(1.0, 1.0);
        backface-visibility: hidden;
        transform: translateZ(0) scale(1.0, 1.0);
    }
}

.navbar2 {
    @extend %navbar;
    right: 60px;
}

.navbar3 {
    @extend %navbar;
    right: 100px;
}