<template>
  <header>
    <div class="actions-left">
      <slot name="actions-left" />
    </div>
    <div class="title">
      <slot name="title" />
    </div>
    <div class="actions-right">
      <slot name="actions-right" />
    </div>
  </header>
</template>
<style lang="scss" scoped>
  @import 'Styles/colors.scss';
  @import 'Styles/helpers.scss';
  @import 'Styles/fonts.scss';

  header {
    align-items: center;
    border-bottom: 1px solid $border-color;
    display: flex;
    height: 68px;
    margin-bottom: 40px;
    padding: 0 3em;

    > * {
      flex: 1;
    }

    .title {
      @extend .plugin-title;

      color: $border-color-darker;
      text-align: center;
    }

    .actions-right {
      text-align: right;
    }
  }
</style>
