<script setup lang="ts">
import * as log from "loglevel";

log.debug("LearningContentContainer.vue setup");

defineEmits(["exit"]);
</script>

<template>
  <div>
    <div class="absolute bottom-0 top-0 w-full bg-white">
      <div class="h-content overflow-y-auto">
        <header
          class="relative flex h-12 w-full items-center justify-between bg-white px-4 lg:h-16 lg:px-8"
        >
          <button
            type="button"
            class="absolute right-2 top-2 h-8 w-8 cursor-pointer lg:right-4 lg:top-4"
            data-cy="close-learning-content"
            @click="$emit('exit')"
          >
            <it-icon-close></it-icon-close>
          </button>
        </header>
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
$nav-height: 86px;

.h-content {
  height: calc(100vh - $nav-height);
}

.nav {
  height: $nav-height;
}
</style>
