<template>
  <div>
    <div class="bottom-toolbar card-body">
      <slot></slot>
      <div class="right">
        <slot name="right"></slot>
      </div>
    </div>
    <div class="bottom-toolbar-placeholder"></div>
  </div>
</template>

<style lang="scss" scoped>
  .bottom-toolbar {
    position: fixed;
    width: auto;
    left: 2rem;
    right: 2rem;
    bottom: 0;
    z-index: 2;
    background: #f5f5f5;
    box-shadow: 0 0 5px rgba(0,0,0,.3);
    display: flex;
    flex-wrap: wrap;

    .right {
      margin-left: auto;
    }
  }

  .bottom-toolbar-placeholder {
    height: 8vw;
  }
</style>
