<script lang="ts" setup>
/**
 * Slot: Left + Right
 */
defineOptions({
  name: 'LayoutSlotArea'
})
</script>

<template>
  <main
    class="slot-area-layout-container"
  >
    <div class="area-left">
      <slot name="left"></slot>
    </div>
    <div
      class="area-right"
    >
      <slot name="right"></slot>
    </div>
  </main>
</template>

<style lang="scss" scoped>
.slot-area-layout-container {
  --at-apply: flex flex-1 min-w-0 overflow-hidden;
  --at-apply: bg-#f9fbfc;

  .area-left {
    --at-apply: min-w-0 h-full;
  }

  .area-right {
    --at-apply: flex-1 overflow-y-auto;

    // --at-apply: b-2 b-purple b-solid;
  }
}
</style>
