<template>
  <section class="rightTopBorder">
    <div class="corner" v-for="item in border" :key="item" :class="item"/>
    <slot/>
  </section>
</template>

<script>
export default {
  name: "rightTopBorder",
  data() {
    return {
      border: ['left-top', 'right-top', 'left-bottom', 'right-bottom']
    }
  }
}
</script>

<style lang="scss" scoped>
.rightTopBorder {
  position: relative;
  height: 32px;
  min-width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 4px 2px #1745DE inset;
  background: rgba(#000972, .3) no-repeat center;

  .corner {
    height: 18px;
    width: 18px;
    position: absolute;
    display: block;
    background-image: url("./assets/corner.svg");
    background-repeat: no-repeat;

    &.left-top {
      left: -6px;
      top: -6px;
      transform: rotateY(180deg);
    }

    &.right-top {
      right: -6px;
      top: -6px;
    }

    &.left-bottom {
      left: -6px;
      bottom: -6px;
      transform: rotateX(180deg) rotateY(180deg);
    }

    &.right-bottom {
      right: -6px;
      bottom: -6px;
      transform: rotateX(180deg);
    }
  }
}
</style>
