<template>
    <div class="skeleton-topbar">
        <VueSkeletonLoader class="skeleton-topbar--item h-28 w-20" />
        <VueSkeletonLoader class="skeleton-topbar--item h-28 ml-auto w-25" />
        <VueSkeletonLoader class="skeleton-topbar--item h-28 w-2 ml-20 hide-small" />
        <VueSkeletonLoader class="skeleton-topbar--item h-28 ml-20 w-150 w-25 hide-small" />
    </div>
</template>
<script>
import VueSkeletonLoader from 'skeleton-loader-vue';

export default {
    components: {
        VueSkeletonLoader
    }
};
</script>
<style lang="scss">
.skeleton-topbar {
    width: 100%;
    display: flex;
    align-items: center;

    .skeleton-topbar--item {
        &.w-20 {
            width: 20% !important;
        }

        &.w-25 {
            width: 25% !important;
        }

        &.w-2 {
            width: 2px !important;
        }

        &.h-28 {
            height: 28px !important;
        }

        &.ml-auto {
            margin-left: auto !important;
        }

        &.ml-20 {
            margin-left: 20px !important;
        }

        &.mr-20 {
            margin-right: 20px !important;
        }
    }
}
</style>
