/// Tour
///
/// @group tours
///
/// @example scss - usage
///   @include k-Tour;
///
/// @example html
/// <div class="k-Popover"
///      role="dialog"
///      aria-hidden="true"
///      aria-labelledby="dialogtitle">
///   <div class="k-Popover__container">
///     <svg> … </svg>
///   </div>
///   <div class="k-Tour__popover__content">
///     <p id="dialogtitle" class="k-Tour__popover__title"> … </p>
///       <p class="k-Tour__popover__text"> … </p>
///     <div class="k-Tour__popover__navigation">
///       <p class="k-Tour__popover__numbering"> … </p>
///       <button title="Précédent" class="k-Tour__popover__button
///                                        k-Button
///                                        k-Button--hydrogen
///                                        k-Button--tiny
///                                        k-Button--icon"
///                                        disabled>
///         <svg class="k-Button__icon" … ></svg>
///         Prec
///       </button>
///       <button title="Suivant" class="k-Tour__popover__button
///                                      k-Button
///                                      k-Button--hydrogen
///                                      k-Button--tiny
///                                      k-Button--icon
///                                      k-Button--iconRight">
///         Suiv
///         <svg class="k-ButtonIcon__svg" … ></svg>
///       </button>
///     </div>
///   </div>
/// </div>

@mixin k-Tour($options: ()) {
  // Tour.
  $popover-z-index: k-default(
    k-number-definition(map-get($options, 'popover-z-index')),
    10
  );

  $color: map-get($k-colors, 'font-1');

  // Target hightlight.
  $target-highlight-width: k-px-to-rem(50px);
  $target-highlight-height: k-px-to-rem(50px);
  $target-highlight-z-index: k-default(
    k-number-definition(map-get($options, 'target-highlight-z-index')),
    10
  );

  $marger: k-px-to-rem(40px);

  .k-Tour {
    color: $color;
  }

  .k-Tour__popover {
    z-index: $popover-z-index;

    box-shadow: k-px-to-rem(4px)
                k-px-to-rem(4px)
                k-px-to-rem(4px)
                rgba(0, 0, 0, .3);

    .k-Tour.is-hidden & {
      opacity: 0;
    }
  }

  .k-Tour__popover__illustration {
    display: flex;
    align-items: center;
    justify-content: center;
    width: k-px-to-rem(80px);
    margin-left: $marger;
  }

  .k-Tour__popover__svg--primary {
    fill: map-get($k-colors, 'font-1');
  }

  .k-Tour__popover__container {
    display: flex;
  }

  .k-Tour__popover__content {
    flex-direction: column;
    flex: 1;

    margin-left: $marger;
  }

  .k-Tour__popover__navigation {
    position: absolute;
    bottom: $marger;

    display: flex;
    justify-content: space-between;
    margin-top: auto;

    width: k-px-to-rem(320px);
  }

  .k-Tour__popover__step {
    align-self: center;
  }

  .k-Tour__popover__buttons {
    display: flex;
  }

  .k-Tour__popover__button {
    margin-right: k-px-to-rem(30px);
  }

  .k-Tour__popover__button--right {
    margin-right: 0;
  }

  .k-Tour__step__targetHighlight {
    box-sizing: content-box;
    position: absolute;
    width: $target-highlight-width;
    height: $target-highlight-height;
    z-index: $target-highlight-z-index;

    border-radius: 100%;
    border: 2px solid rgba(map-get($k-colors, 'tertiary-1'), .8);

    pointer-events: none;

    .k-Tour.is-hidden & {
      opacity: 0;
    }

    &:before {
      $target-before-options: (
        width: $target-highlight-width,
        height: $target-highlight-height,
      );

      content: "";

      @include k-tour-targetHighlightAnimation($target-before-options)
    }

    &:after {
      $target-after-options: (
        width: $target-highlight-width,
        height: $target-highlight-height,
        animation-delay: 1s,
      );

      content: "";

      @include k-tour-targetHighlightAnimation($target-after-options)
    }

    .k-Tour__step__targetHighlightContent {
      $target-options: (animation-delay: 2s);

      display: block;

      @include k-tour-targetHighlightAnimation($target-options)
    }
  }

  @keyframes k-tour-targetHighlightAnimationKeyframes {
    0% { transform: scale(1); opacity: 0; }
    40% { opacity: 1; }
    100% { transform: scale(2); opacity: 0; }
  }
}


@mixin k-tour-targetHighlightAnimation($options: ()) {
  $border-width: 6px;
  $height: k-default(map-get($options, 'height'), 100%);
  $width: k-default(map-get($options, 'width'), 100%);
  $animation-duration: 3s;
  $animation-delay: k-default(map-get($options, 'animation-delay'), 0s);

  box-sizing: content-box;
  position: absolute;
  top: -$border-width;
  left: -$border-width;
  width: $width;
  height: $height;

  border: $border-width solid rgba(map-get($k-colors, 'secondary-1'), .6);
  border-radius: 100%;

  animation-name: k-tour-targetHighlightAnimationKeyframes;
  animation-duration: $animation-duration;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
  animation-delay: $animation-delay;
}