<template>
  <div>
    <div class="modal-card card">
      <header class="modal-card-head">
        <p class="modal-card-title">
          <slot name="header-title">
            Text
          </slot>
        </p>
      </header>

      <section class="modal-card-body">
        <slot name="content" />
      </section>

      <footer class="modal-card-foot">
        <b-button
          size="is-small"
          type="is-dark"
          class="button"
          style="margin-bottom: 0"
          outlined
          @click="$emit('close')"
        >
          Close
        </b-button>
        <slot name="footer" />
      </footer>
    </div>
  </div>
</template>

<style lang="sass" scoped>
.card
  top: $workspace-margin
  height: 50vh

.modal-card-title
  font-size: $card-title-size
  font-weight: $section-title-font-weight
  // font-size: 1.2rem
  // color: #1e2dff

.modal-card-foot
  padding: 1rem 1.5rem
</style>
