<script lang="ts" setup></script>

<template>
  <div class="w-full h-full p-2 container">
    <!-- <div class="header"></div>
    <div class="footer"></div> -->
    <slot></slot>
  </div>
</template>

<style scoped lang="scss">
.container {
  border: 1px solid rgb(42, 94, 119);
  position: relative;
  background: linear-gradient(
        to bottom,
        white 0px,
        white 1px,
        transparent 3px,
        transparent 100%
      )
      left top no-repeat,
    linear-gradient(
        to right,
        white 0px,
        white 2px,
        transparent 3px,
        transparent 100%
      )
      left top no-repeat,
    linear-gradient(
        to bottom,
        white 0px,
        white 2px,
        transparent 3px,
        transparent 100%
      )
      right top no-repeat,
    linear-gradient(
        to left,
        white 0px,
        white 2px,
        transparent 3px,
        transparent 100%
      )
      right top no-repeat,
    linear-gradient(
        to top,
        white 0px,
        white 2px,
        transparent 3px,
        transparent 100%
      )
      left bottom no-repeat,
    linear-gradient(
        to right,
        white 0px,
        white 2px,
        transparent 3px,
        transparent 100%
      )
      left bottom no-repeat,
    linear-gradient(
        to top,
        white 0px,
        white 2px,
        transparent 3px,
        transparent 100%
      )
      right bottom no-repeat,
    linear-gradient(
        to left,
        white 0px,
        white 2px,
        transparent 3px,
        transparent 100%
      )
      right bottom no-repeat;
  background-size: 0.8rem 0.8rem;
}
</style>
