//
// Copyright IBM Corp. 2016, 2018
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//

@import 'layer';

// Tooltip
// Definition and Icon CSS only tooltip
/// @param {String} $tooltip-type ['icon'] - The type, from: `icon`, `definition`
/// @param {String} $position ['bottom'] - The position, from: `top`, `right`, `bottom`, `left`
/// @access public
/// @group tooltip
@mixin tooltip--trigger($tooltip-type: 'icon', $position: 'bottom') {
  @include reset;
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  overflow: visible;

  @if $tooltip-type == 'icon' {
    &:focus {
      outline: 1px solid transparent;

      svg {
        @include focus-outline('border');
      }
    }
  }

  // ::before - Tooltip caret
  // ::after - legacy Tooltip content (deprecated)
  // .#{$prefix}--assistive-text - WCAG 2.1 compliant tooltip content
  //    that can either be a child (icon tooltip) or sibling (definition tooltip)
  &::before,
  &::after,
  .#{$prefix}--assistive-text,
  + .#{$prefix}--assistive-text {
    @include type-style('body-short-01');
    position: absolute;
    z-index: z('floating');
    display: flex;
    align-items: center;
    opacity: 0;
    pointer-events: none;
  }

  &::before,
  &::after {
    transition: opacity $duration--fast-01 motion(standard, productive);
  }

  &.#{$prefix}--tooltip--a11y::before,
  &.#{$prefix}--tooltip--a11y::after {
    transition: none;
  }

  // caret
  &::before {
    width: 0;
    height: 0;
    border-style: solid;
    content: '';
  }

  .#{$prefix}--assistive-text,
  + .#{$prefix}--assistive-text {
    box-sizing: content-box;
    color: inherit;
    // In order to pass AAT, opacity must be set to 1 in the default state
    // On focus/hover use a keyframe animation to mimic transition
    opacity: 1;
    // overwrite default nowrap behavior
    white-space: normal;
  }

  // content box
  // @todo Simplify CSS selectors on next major release
  &::after,
  &:hover .#{$prefix}--assistive-text,
  &:focus .#{$prefix}--assistive-text,
  &:hover + .#{$prefix}--assistive-text,
  &:focus + .#{$prefix}--assistive-text {
    @include layer('overlay');
    width: max-content;
    max-width: rem(208px);
    height: auto;
    padding: if(
      $tooltip-type == 'definition',
      rem(8px) rem(16px),
      rem(2px) rem(16px)
    );
    border-radius: rem(2px);
    color: $inverse-01;
    font-weight: 400;
    text-align: left;
    transform: translateX(-50%);
    pointer-events: none;
    background-color: $inverse-02;
  }

  &::after {
    content: attr(aria-label);
  }

  &.#{$prefix}--tooltip--a11y::after {
    content: none;
  }

  &:hover,
  &:focus {
    &::before,
    &::after {
      opacity: 1;
    }

    @keyframes tooltip-fade {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }

    .#{$prefix}--assistive-text,
    + .#{$prefix}--assistive-text {
      clip: auto;
      margin: auto;
      overflow: visible;
    }

    .#{$prefix}--assistive-text,
    + .#{$prefix}--assistive-text,
    &.#{$prefix}--tooltip--a11y::before {
      animation: tooltip-fade $duration--fast-01 motion(standard, productive);
    }
  }
}

// Tooltip
// Definition and Icon CSS only tooltip
/// @param {String} $tooltip-type ['icon'] - The type, from: `icon`, `definition`
/// @param {String} $position ['bottom'] - The position, from: `top`, `right`, `bottom`, `left`
/// @param {String} $align ['center'] - The alignment, from: `start`, `center`, `end`
/// @access public
/// @group tooltip
@mixin tooltip--placement(
  $tooltip-type: 'icon',
  $position: 'bottom',
  $align: 'center'
) {
  // position and alignment
  $caret-spacing: if(
    $tooltip-type == 'definition',
    rem(4px),
    rem(8px)
  ); // space between caret and trigger button
  $caret-height: rem(5px);
  $caret-width: rem(8px);
  $translate-caret: #{$caret-height} + #{$caret-spacing};
  $translate-body: 100% + #{$caret-spacing} + #{$caret-height};
  $rotate-caret: set-caret-rotation($position);

  // @todo Simplify CSS selectors on next major release
  &::before,
  &::after,
  &:hover .#{$prefix}--assistive-text,
  &:focus .#{$prefix}--assistive-text,
  &:hover + .#{$prefix}--assistive-text,
  &:focus + .#{$prefix}--assistive-text {
    @if ($position == 'top') {
      top: 0;
      left: 50%;
    }
    @if ($position == 'right') {
      top: 50%;
      right: 0;
    }
    @if ($position == 'bottom') {
      bottom: 0;
      left: 50%;
    }
    @if ($position == 'left') {
      top: 50%;
      left: 0;
    }
  }

  &::before {
    @if ($position == 'top') {
      border-width: rem(5px) rem(4px) 0 rem(4px);
      border-color: $inverse-02 transparent transparent transparent;
      transform: translate(-50%, calc(-1 * (#{$translate-caret})));
    }
    @if ($position == 'right') {
      border-width: rem(4px) rem(5px) rem(4px) 0;
      border-color: transparent $inverse-02 transparent transparent;
      transform: translate(calc(#{$translate-caret}), -50%);
    }
    @if ($position == 'bottom') {
      border-width: 0 rem(4px) rem(5px) rem(4px);
      border-color: transparent transparent $inverse-02 transparent;
      transform: translate(-50%, calc(#{$translate-caret}));
    }
    @if ($position == 'left') {
      border-width: rem(4px) 0 rem(4px) rem(5px);
      border-color: transparent transparent transparent $inverse-02;
      transform: translate(calc(-1 * (#{$translate-caret})), -50%);
    }
  }

  // alignment options available only for top and bottom tooltip position
  // @todo Simplify CSS selectors on next major release
  &::after,
  &:hover .#{$prefix}--assistive-text,
  &:focus .#{$prefix}--assistive-text,
  &:hover + .#{$prefix}--assistive-text,
  &:focus + .#{$prefix}--assistive-text {
    @if ($position == 'top') {
      @if ($align == 'start') {
        left: 0;
        transform: translate(0, calc(-1 * (#{$translate-body})));
      } @else if ($align == 'end') {
        right: 0;
        left: initial;
        transform: translate(0, calc(-1 * (#{$translate-body})));
      } @else {
        left: 50%;
        transform: translate(-50%, calc(-1 * (#{$translate-body})));
      }
    }
    @if ($position == 'right') {
      transform: translate(calc(#{$translate-body}), -50%);
    }
    @if ($position == 'bottom') {
      @if ($align == 'start') {
        left: 0;
        transform: translate(0, calc(#{$translate-body}));
      } @else if ($align == 'end') {
        right: 0;
        left: initial;
        transform: translate(0, calc(#{$translate-body}));
      } @else {
        transform: translate(-50%, calc(#{$translate-body}));
      }
    }
    @if ($position == 'left') {
      transform: translate(calc(-1 * (#{$translate-body})), -50%);
    }
  }

  // @todo simplify on next major release to move the ::before pseudo element within the tooltip instead of the trigger
  @if $tooltip-type == 'definition' {
    &.#{$prefix}--tooltip--a11y + .#{$prefix}--assistive-text {
      @if ($position == 'bottom') {
        @if ($align == 'start') {
          transform: translate(0, calc(#{$translate-body} - 1px));
        } @else if ($align == 'end') {
          transform: translate(0, calc(#{$translate-body} - 1px));
        } @else {
          transform: translate(-50%, calc(#{$translate-body} - 1px));
        }
      }
    }
  }
}