//
// 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 'helper-mixins';
@import 'css--helpers';
@import 'layout';
@import 'typography';

// Tooltip
// Tooltip caret visual styles
/// @access public
/// @group tooltip
@mixin tooltip--caret {
  position: absolute;
  z-index: z('floating');
  width: 0;
  height: 0;
  border-style: solid;
  content: '';
}

// Tooltip
// Tooltip content box visual styles
/// @param {String} $tooltip-type ['icon'] - The type, from: `icon`, `definition`
/// @access public
/// @group tooltip
@mixin tooltip--content($tooltip-type: 'icon') {
  @include box-shadow;

  width: max-content;
  min-width: rem(24px);
  max-width: rem(208px);
  height: auto;
  padding: if(
    $tooltip-type == 'definition',
    rem(8px) rem(16px),
    rem(3px) rem(16px)
  );
  color: $inverse-01;
  font-weight: 400;
  text-align: left;
  background-color: $inverse-02;
  border-radius: rem(2px);
  transform: translateX(-50%);
  @include type-style('body-short-01');

  // IE media query
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    width: auto;
  }
  // Edge 12-15 and Edge 16 feature queries
  @supports (-ms-accelerator: true) {
    width: auto;
  }
  @supports (-ms-ime-align: auto) {
    width: auto;
  }

  // Windows, Firefox HCM Fix
  @media screen and (-ms-high-contrast: active), screen and (prefers-contrast) {
    border: 1px solid transparent;
  }
}

// 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') {
  position: relative;
  display: inline-flex;
  align-items: center;
  overflow: visible;
  cursor: pointer;

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

  @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 {
    position: absolute;
    z-index: z('floating');
    display: flex;
    align-items: center;
    opacity: 0;
    pointer-events: none;

    // IE media query
    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
      display: inline-block;
    }
  }

  &::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;
    // overwrite default nowrap behavior
    white-space: normal;
    word-break: break-word;
    // 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;
  }

  // content box
  // @todo Simplify CSS selectors on next major release
  &::after,
  .#{$prefix}--assistive-text,
  + .#{$prefix}--assistive-text {
    @include tooltip--content($tooltip-type);
  }

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

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

  &.#{$prefix}--tooltip--visible,
  &:hover,
  &:focus {
    &::before,
    &::after {
      opacity: 1;
    }

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

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

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

  &.#{$prefix}--tooltip--hidden .#{$prefix}--assistive-text,
  &.#{$prefix}--tooltip--hidden + .#{$prefix}--assistive-text {
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  &.#{$prefix}--tooltip--hidden.#{$prefix}--tooltip--a11y::before {
    opacity: 0;
    animation: none;
  }
}

// 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);
  $body-spacing: $caret-spacing + $caret-height;

  // @todo Simplify CSS selectors on next major release
  &::before,
  &::after,
  .#{$prefix}--assistive-text,
  + .#{$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;
    }
    @if ($position == 'middle') {
      top: 0;
      left: 0;
    }
  }

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

  // alignment options available only for top and bottom tooltip position
  // @todo Simplify CSS selectors on next major release
  &::after,
  .#{$prefix}--assistive-text,
  + .#{$prefix}--assistive-text {
    @if ($position == 'top') {
      top: -$body-spacing;
      @if ($align == 'start') {
        left: 0;
        transform: translate(0, -100%);
      } @else if ($align == 'end') {
        right: 0;
        left: auto;
        transform: translate(0, -100%);
      } @else {
        left: 50%;
        transform: translate(-50%, -100%);
      }
    }
    @if ($position == 'right') {
      right: -$body-spacing;
      transform: translate(100%, -50%);
    }
    @if ($position == 'bottom') {
      bottom: -$body-spacing;
      @if ($align == 'start') {
        left: 0;
        transform: translate(0, 100%);
      } @else if ($align == 'end') {
        right: 0;
        left: auto;
        transform: translate(0, 100%);
      } @else {
        transform: translate(-50%, 100%);
      }
    }
    @if ($position == 'left') {
      left: -$body-spacing;
      transform: translate(-100%, -50%);
    }
    @if ($position == 'middle') {
      left: 0;
      max-width: unset; /* stylelint-disable-line declaration-property-value-blacklist */
      white-space: nowrap;
      transform: translate(0, 0);
    }
  }

  .#{$prefix}--definition-text__span {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  // @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') {
        // carryover from https://github.com/carbon-design-system/carbon/pull/3151/files#diff-93734be0784e9530b6d14a7b03b0d352R261-R265
        bottom: -($body-spacing - rem(1px));
        @if ($align == 'start' or $align == 'end') {
          transform: translate(0, 100%);
        } @else {
          transform: translate(-50%, 100%);
        }
      }
    }
  }
}