<template>
    <div class="skeleton-footer">
        <div class="first-row">
            <div class="footer-container">
                <VueSkeletonLoader class="skeleton-sidebar--item text h-40"/>    
                <VueSkeletonLoader class="skeleton-sidebar--item inline-content h-20 w-20 hide-small ml-auto"/>    
                <VueSkeletonLoader class="skeleton-sidebar--item inline-content h-20 w-20 ml-10"/>    
                <VueSkeletonLoader class="skeleton-sidebar--item inline-content h-20 w-20 ml-10"/>    
            </div>
        </div>
        <div class="second-row hide-small">
            <div class="footer-container">
                <VueSkeletonLoader class="skeleton-sidebar--item inline-content h-40 w-20"/>     
                <VueSkeletonLoader class="skeleton-sidebar--item inline-content h-40 w-20 ml-10"/>     
                <VueSkeletonLoader class="skeleton-sidebar--item inline-content h-40 w-20 ml-10"/>     
                <VueSkeletonLoader class="skeleton-sidebar--item inline-content h-40 w-20 ml-10"/>     
                <VueSkeletonLoader class="skeleton-sidebar--item inline-content h-40 w-20 ml-10"/>     
                <VueSkeletonLoader class="skeleton-sidebar--item inline-content h-40 w-20 ml-10"/>     
                <VueSkeletonLoader class="skeleton-sidebar--item inline-content h-40 w-20 ml-10"/>     
                <VueSkeletonLoader class="skeleton-sidebar--item inline-content h-40 w-20 ml-10"/>     
            </div>
        </div>
    </div>
</template>
<script>
import VueSkeletonLoader from 'skeleton-loader-vue';

export default {
    components : {
        VueSkeletonLoader
    }
}
</script>
<style lang="scss">
.skeleton-footer {
    width: 100%;
    .skeleton-sidebar--item {
        &.ml-10 {
            margin-left: 10px;
            @media only screen and (max-width: 992px) {
                margin-left: 0px;                        
            }
        }
        &.ml-auto {
            margin-left: auto;
        }
        &.h-20 {
            height: 20px!important;
        }
        &.h-40 {
            height: 40px!important;
        }
        &.w-40 {
            width: 40%!important;
        }
    }
}
</style>