<template>
  <div class="card-wrapper">
    <slot />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'ModeBorder',
})
</script>

<style lang="stylus" scoped>
@import '../main.styl'
.card-wrapper
  $blur()
  padding .05rem
  box-sizing border-box
  border-top .01rem solid $primary-border
  border-bottom .01rem solid $primary-border
  background linear-gradient(to bottom, rgba(30, 193, 255, .3), transparent 5%,  transparent 95%, rgba(30, 193, 255, .3) 100%)
  display flex
  flex-direction column
  // justify-content space-between
</style>
