/**
 *
 * @ai-apps/angular v2.152.0 | _tooltip.scss
 *
 * Copyright 2014, 2023 IBM
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0

 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */


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

@use 'box-shadow' as *;
@use 'convert' as *;
@use 'focus-outline' as *;
@use 'z-index' as *;
@use '../config' as *;
@use '../motion' as *;
@use '../theme' as *;
@use '../type';

// 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;

  z-index: z('floating');
  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)
  );
  background-color: $background-inverse;
  border-radius: rem(2px);
  color: $text-inverse;
  font-weight: 400;
  text-align: left;
  transform: translateX(-50%);
  @include type.type-style('body-compact-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;
  overflow: visible;
  align-items: center;

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

  @if $tooltip-type == 'definition' {
    cursor: default;
  }

  @if $tooltip-type == 'icon' {
    cursor: pointer;

    &: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);

    @media screen and (prefers-reduced-motion: reduce) {
      transition: none;
    }
  }

  &.#{$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;
    word-break: break-word;
  }

  // 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 {
      overflow: visible;
      margin: auto;
      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 {
    overflow: hidden;
    margin: -1px;
    clip: rect(0, 0, 0, 0);
  }

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

// 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;

  // Use pseudo element to create invisible hover area to keep tooltip open on hover
  .#{$prefix}--assistive-text::after {
    position: absolute;
    display: block;
    content: '';
    // clip-path: polygon(50% 100%, 0 0, 100% 0);

    @if ($position == 'top' or $position == 'bottom') {
      left: 0;
      width: 100%;
      height: rem(12px);
    }

    @if ($position == 'left' or $position == 'right') {
      top: 0;
      width: rem(12px);
      height: 100%;
    }

    @if ($position == 'top') {
      bottom: rem(-12px);
    }
    @if ($position == 'right') {
      left: rem(-12px);
    }
    @if ($position == 'bottom') {
      top: rem(-12px);
    }
    @if ($position == 'left') {
      right: rem(-12px);
    }
  }

  // @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;
    }
  }

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

  // @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%);
        }
      }
    }
  }
}
