<template>
  <div class="co-container" :class="[
  ]" :style="{
    paddingTop: getPaddingTop,
    paddingLeft: getPaddingLeft,
    paddingRight: getPaddingRight,
    paddingBottom: getPaddingBottom
  }">
  <div v-if="$slots.absolute" class="co-container__absolute" :class="[
    getPositionStr
  ]" :style="{
    width: getWidth,
    height: getHeight
  }"><slot name="absolute"></slot></div>
  <div class="co-container__area"><slot></slot></div>
  </div>
</template>

<script>
  export default {
    name: 'CoContainer',
    props: {
      position: String,
      size: String
    },
    computed: {
      getPaddingTop() {
        if (this.position === 'top') {
          return this.size || '60px';
        }
      },
      getPaddingLeft() {
        if (this.position === 'left') {
          return this.size || '60px';
        }
      },
      getPaddingRight() {
        if (this.position === 'right') {
          return this.size || '60px';
        }
      },
      getPaddingBottom() {
        if (!this.position || (this.position === 'bottom')) {
          return this.size || '60px';
        }
      },
      getWidth() {
        if (this.position === ('left' || 'right')) {
          return this.size || '60px';
        }
      },
      getHeight() {
        if (!this.position || (this.position === ('top' || 'bottom'))) {
          return this.size || '60px';
        }
      },
      getPositionStr() {
        return 'is-' + (this.position || 'bottom');
      }
    }
  };
</script>
