<template>
  <footer>
    <p>
      Need help?
      <br>
      <TfCtaEmailSupport
        type="primary"
        data-test="contact support"
      >
        Contact support
      </TfCtaEmailSupport>.
    </p>
  </footer>
</template>

<script>
/**
 * WatchTower Auth Flow Footer
 *
 * @vuedoc
 * @exports AuthenticationFooter
 * @category Components
 */
  export default {
    name: 'AuthenticationFooter',
  };
</script>

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

  footer {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    padding: 20px 0 40px;
    text-align: center;
    background: $tf-white;
  }

  .auth-form p {
    &,
    .tf-button--text,
    .wt-button--text {
      font-size: 14px;
    }

    .tf-button--text,
    .wt-button--text {
      display: inline-block;
    }
  }
</style>
