@mixin m-build-component--nav-scroll-top-base($layout) {
    .m-scroll-top {
        width: 40px;
        height: 40px;
        position: fixed;
        bottom: 40px;  
        right: 20px;
        cursor: pointer;
        text-align: center;
        vertical-align: middle;
        display: none;
        padding-top: 9px;
        z-index: 110;
        
        @include border-radius(100%);

        > i {
            font-size: get-font-size(icon);
        }          

        &:hover {
            text-decoration: none;
        }

        .m-scroll-top--shown & {
            display: block;
        }
    }
}

@mixin m-build-component--nav-scroll-top-skin($layout, $skin) {
    
    @include component-skin(m-scroll-top, $skin) {        
        background: array-get($layout, bg-color);
        @include shadow(get-shadow($skin));

        > i {
            color: get-color($skin, icon);
        }

        &:hover {
            > i {
                color: get-brand-color();
            } 
        }
    }
}

@include m-build-component--nav-scroll-top-base( array-get($m--nav, scroll-top) );

@include m-build-component--nav-scroll-top-skin( array-get($m--nav, scroll-top, skins, light), light);

@include m-build-component--nav-scroll-top-skin( array-get($m--nav, scroll-top, skins, dark), dark);