<template>
  <nav
    class="module-sub-navigation sub-navigation">
    <back-link
      :title="module.title"
      type="module"/>
  </nav>

</template>

<script>
  import BackLink from '@/components/BackLink';
  import {moduleQuery} from '@/graphql/queries';

  import me from '@/mixins/me';

  export default {
    apollo: {
      module: moduleQuery,
    },

    mixins: [me],

    components: {
      BackLink,
    },

    data() {
      return {
        module: {},
      };
    },
  };
</script>

<style scoped lang="scss">
  @import "~styles/helpers";

  @mixin module-navigation-typography {
    font-family: $sans-serif-font-family;
    color: $color-silver-dark;
    font-weight: $font-weight-regular;
  }

  .module-sub-navigation {
    display: none;
    width: 100%;
    box-sizing: border-box;
    z-index: 11;
    background-color: $color-white;
    border-top: 1px solid $color-silver;

    &__topic-link {
      @include regular-text;
    }

    @include desktop {
      display: flex;
    }

    &__module-content {
      margin-bottom: 18px;
    }

    &__heading {
      @include module-navigation-typography;
      margin: 0;
      font-size: 1.0625rem;
      cursor: pointer;
    }

    &__anchors {
      display: flex;
      flex-direction: column;
      padding: 16px 24px 0;
    }

    &__anchor {
      @include module-navigation-typography;
      font-size: 0.875rem;
      line-height: 1.2rem;
      margin-bottom: .6875rem;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;

      &--active {
        color: $color-brand;
      }
    }

    &__toggle-menu {
      margin-left: auto;
      display: flex;
      align-items: center;
    }

    &__actions {
      @include regular-text;
      margin-right: $medium-spacing;
    }
  }
</style>
