<template>
  <section
    class="l-flex--col c-page"
    :class="{ margin }"
  >
    <div
      class="c-page__content"
      :class="{
        fill, auto, padding, background,
        'l-flex': !vertical,
        'l-flex--col': vertical
      }"
    >
      <slot />
    </div>
  </section>
</template>

<script>
export default {
  name: 'Wrapper',
  props: {
    fill: {
      type: [Boolean, String],
      default: false
    },
    auto: {
      type: [Boolean, String],
      default: false
    },
    background: {
      type: [Boolean, String],
      default: false
    },
    vertical: {
      type: Boolean,
      default: true
    },
    margin: {
      type: [Boolean, String],
      default: false
    },
    padding: {
      type: [Boolean, String],
      default: false
    }
  }
}
</script>

<style lang="scss" scoped>
.c-page {
  overflow: auto;

  &.margin {
    padding: $spacing;
  }

  .c-page__content {
    flex: none;
    min-width: 860px;
    min-height: 500px;
    overflow: hidden;

    &.fill {
      flex: 1 0 0;
    }

    &.auto {
      flex: 1 0 auto;
    }

    &.padding {
      padding: $spacing;
    }

    &.background {
      border-radius: $radius;
      background-color: #fff;
    }
  }
}
</style>
