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

@use "../../theme" as *;
@use "../../type" as *;
@use "../../motion" as *;
@use "../../config" as *;
@use "../../spacing" as *;
@use "../../utilities/layer" as *;
@use "./vars";
@use "./mixins";
@import "./animations/fade.scss";
@import "./themes/light.scss";
@import "./themes/light-border.scss";

// TODO: deprecate legacy tooltip mixins
// Tooltip Icon
// Icon CSS only tooltip
/// @access private
/// @deprecated
/// @group tooltip
@mixin tooltip {
  .#{$prefix}--tooltip {
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent;
    background: $background-main;
    padding: $spacing-03;
    &.#{$prefix}--tooltip--disable-padding {
      padding: 0;
    }
    &.#{$prefix}--tooltip--click {
      cursor: pointer;
    }
    &--trigger {
      cursor: pointer;
    }
    /*opacity: 0;
  display: none;*/
    //transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    //transition-property: transform;
    cursor: pointer;
    max-width: 300px;
    border-radius: 7px;
    line-height: 1.5rem;
    @include layer("pop-out");
    z-index: 1000;
    @include type-style("body-short-02");
    &[data-popper-placement*="bottom"] {
      .#{$prefix}--tooltip__arrow {
        top: 0;
        left: 0;
        margin-top: -4px;
        /*&::before {
        border-width: 0 1.5em 1em 1.5em;
        border-color: transparent transparent #232323 transparent;
      }*/
      }
    }
    &[data-popper-placement*="top"] {
      .#{$prefix}--tooltip__arrow {
        bottom: 0;
        left: 0;
        margin-bottom: -4px;
        /*&::before {
        border-width: 1em 1.5em 0 1.5em;
        border-color: #232323 transparent transparent transparent;
      }*/
      }
    }
    &[data-popper-placement*="right"] {
      .#{$prefix}--tooltip__arrow {
        left: 0;
        margin-left: -4px;
        /*&::before {
        border-width: 1.5em 1em 1.5em 0;
        border-color: transparent #232323 transparent transparent;
      }*/
      }
    }
    &[data-popper-placement*="left"] {
      .#{$prefix}--tooltip__arrow {
        right: 0;
        margin-right: -4px;
        /*&::before {
        border-width: 1.5em 0 1.5em 1em;
        border-color: transparent transparent transparent#232323;
      }*/
      }
    }
  }

  .#{$prefix}--tooltip--dark {
    color: $text-inverse-default;
    background: $background-secondary;
    .#{$prefix}--tooltip__arrow {
      &:before {
        background: $background-secondary;
      }
    }
  }

  .#{$prefix}--tooltip--visible {
    opacity: 1;
    display: block;
  }

  .#{$prefix}--tooltip__arrow {
    width: 10px;
    height: 10px;
    position: absolute;
    z-index: -1;
    &:before {
      content: "";
      transform: rotate(45deg);
      background: $background-main;
      top: 0px;
      left: 0px;
      width: 10px;
      height: 10px;
      position: absolute;
      z-index: -1;
    }
  }
}