<template>
  <div class="helpful-tooltip">
    <info-icon class="helpful-tooltip__icon" />
    <div class="helpful-tooltip__tooltip">
      <div class="helpful-tooltip__text">
        {{ text }}
      </div>
    </div>
  </div>
</template>

<script>
  const InfoIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/InfoIcon');

  export default {
    props: ['text'],

    components: {
      InfoIcon
    }
  };
</script>

<style scoped lang="scss">
  @import "@/styles/_variables.scss";
  @import "@/styles/_mixins.scss";

  .helpful-tooltip {
    position: relative;

    &__icon {
      width: 20px;
      height: 20px;
      fill: $color-silver-dark;
    }

    &__tooltip {
      visibility: hidden;
      position: absolute;
      left: 30px;
      top: 0px;
      width: 400px;
    }

    &__text {
      display: inline-table;
      width: auto;

      background-color: $color-white;
      border: 1px solid $color-silver-dark;
      border-radius: 5px;
      padding: $small-spacing;
      @include small-text;

      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 18px;
        margin-left: -1px;
        border-left: 1px solid $color-silver-dark;
        border-top: 1px solid $color-silver-dark;
        background-color: $color-white;
        width: 10px;
        height: 10px;
        transform: rotate(-45deg) translateY(-50%);
      }

    }

    &:hover &__tooltip {
      visibility: visible;
    }
  }
</style>
