<script setup>

import ShadowedBox from "../../Components/ShadowedBox.vue";
import MyInvoices from "../../../Domains/Dashboard/Views/Partials/Widgets/MyInvoices.vue";
import OpenCostUnits from "../../../Domains/Dashboard/Views/Partials/Widgets/OpenCostUnits.vue";
import MyParticipationsShort from "../../../Domains/Dashboard/Views/Partials/Widgets/MyParticipationsShort.vue";
import UpcomingEvents from "../../../Domains/Dashboard/Views/Partials/Widgets/UpcomingEvents.vue";
</script>

<template>
    <diV class="widget-container">
        <shadowed-box class="widget-box">
            <MyParticipationsShort />
        </shadowed-box>

        <shadowed-box  class="widget-box">
            <MyInvoices />
        </shadowed-box>
        <shadowed-box  class="widget-box">
            <UpcomingEvents />
        </shadowed-box>
        <shadowed-box  class="widget-box">
            <OpenCostUnits />
        </shadowed-box>
    </diV>
</template>

<style>
 .widget-container {
     display: flex;
     justify-content: space-around;
     flex-wrap: wrap;
     position: relative;


 }

 .widget-box {
     flex-grow: 1; display: inline-block;
     width: calc(25% - 40px);
     height: 150px;
     margin: 0 10px;
 }

 .widget-box h2 {
     display: none;
 }

 @media (max-width: 639px) {
     .widget-container {
         display: none;

     }

 }

</style>
