<script lang="ts" setup>

/**
 * Slot: Top + Center + Bottom
 */
defineOptions({
  name: 'LayoutSlotFrame'
})

</script>

<template>
  <div class="slot-frame-layout-container">
    <div
      v-if="$slots.top"
      class="top"
    >
      <slot name="top"></slot>
    </div>
    <div class="center">
      <slot name="center"></slot>
    </div>
    <!-- <div class="bottom">
      <slot name="bottom"></slot>
    </div> -->
  </div>
</template>

<style lang="scss" scoped>
.slot-frame-layout-container {
  --at-apply: h-100dvh;
  --at-apply: flex flex-col;
  --at-apply: overflow-hidden;

  .top,
  .bottom {
    --at-apply: w-full;

    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1;
    min-height: 0;
  }

  .center {
    --at-apply: flex flex-1 min-w-0 overflow-hidden;
  }
}
</style>
