<template>
  <div
    :class="[{ 'content-only' : !$slots.controls }, 'demo-page-container']"
  >
    <div class="demo-page-content">
      <slot />
    </div>
    <div class="demo-page-controls">
      <slot name="controls" />
    </div>
  </div>
</template>

<script>
  /**
   * A component that houses a slot for the examples and the controls.
   *
   * @vuedoc
   * @exports examples/Layouts/Story
   * @category views
   */

  export default {
    name: 'ExampleStory',
  };
</script>

<style lang="scss" scoped>
  @import 'src/assets/styles/variables';

  .demo-page {
    &-content {
      padding: 40px;
      overflow-y: auto;
    }

    &-container:not(.content-only) {
      display: flex;
      flex-direction: column;
      height: calc(100vh - 56px);
      overflow: hidden;
    }

    &-controls {
      display: flex;
      height: calc(50vh - 55px);
      flex-direction: row;
      margin-top: auto;
      border: 1px solid $tf-extra-light-gray-1;

      > div {
        flex: 1;
        overflow-y: scroll;
        padding: 20px;

        /* stylelint-disable-next-line max-nesting-depth  */
        &:nth-child(even) {
          background: $tf-extra-light-gray-1;
        }
      }
    }
  }
</style>
