@use 'sass:color';

//layout variables
$tooltip-drop-shadow: $shadow-sm !default;
$tooltip-close-icon-border: 1px solid $secondary-bg-color !default;
$tooltip-icon-box-shadow: $shadow-sm !default;
$tooltip-font-size: $text-xs !default;
$tooltip-border-radius: $radius-4 !default;
$border-size: 1px !default;
$border-type: solid !default;
$tooltip-opacity: .9 !default;
$tooltip-arrow-outer-border: 8px !default;
$tooltip-arrow-inner-border: 7px !default;
$tooltip-horizontal-padding: 4px !default;
$tooltip-vertical-padding: 8px !default;
$tooltip-line-height: 18px !default;
$tooltip-arrow-icon-font-size: $text-base !default;
$tooltip-tip-bottom-height: 8px !default;
$tooltip-tip-bottom-left: 50% !default;
$tooltip-tip-bottom-top: 100% !default;
$tooltip-tip-bottom-width: 16px !default;

$tooltip-tip-top-height: 8px !default;
$tooltip-tip-top-left: 50% !default;
$tooltip-tip-top-top: -9px !default;
$tooltip-tip-top-width: 16px !default;

$tooltip-tip-left-height: 16px !default;
$tooltip-tip-left-left: -9px !default;
$tooltip-tip-left-top: 48% !default;
$tooltip-tip-left-width: 8px !default;

$tooltip-tip-right-height: 16px !default;
$tooltip-tip-right-left: 100% !default;
$tooltip-tip-right-top: 50% !default;
$tooltip-tip-right-width: 8px !default;

$tooltip-mobile-font-size: $text-sm !default;
$tooltip-mobile-horizontal-padding: 4px !default;
$tooltip-mobile-vertical-padding: 8px !default;

//color variables
$tooltip-content-bg-color: $tooltip-bg-color !default;
$tooltip-content-border-color: $tooltip-border !default;
$tooltip-content-font-color: $tooltip-text-color !default;
$tooltip-default-icon-color: $secondary-text-color !default;
$tooltip-icon-bg-normal: $secondary-bg-color !default;
$tooltip-hover-icon-color:  $secondary-text-color !default;
$tooltip-icon-bg-hover: $secondary-bg-color-hover !default;
$tooltip-icon-border-color: $secondary-bg-color !default;
$tooltip-close-icon-border-hover: $secondary-border-color-hover !default;
$tooltip-tip-content-line-height: 20px !default;
$tooltip-zero-padding-margin: 0 !default;
$tooltip-wrap-min-width: 30px !default;
$tooltip-zero-height: 0 !default;
$tooltip-one-line-height: 1 !default;
$tooltip-close-right: -9px !default;
$tooltip-close-top: -9px !default;
$tooltip-full-height: 100% !default;
$tooltip-full-width: 100% !default;
$tooltip-bgr-before-font-size: 8px !default;
$tooltip-bgr-before-left: calc(50% - 4px) !default;
$tooltip-bgr-close-border-radius: $radius-10 !default;
$tooltip-bgr-close-border: 1px !default;
$tooltip-bgr-close-height: 20px !default;
$tooltip-bgr-close-width: 20px !default;
$tooltip-nrml-close-border-radius: $radius-9 !default;
$tooltip-nrml-close-border: 1px !default;
$tooltip-nrml-close-height: 16px !default;
$tooltip-nrml-close-width: 16px !default;
$tooltip-close-before-font-size: 9px !default;
$tooltip-close-before-margin-right: 2px !default;

@mixin tip-size($height, $left, $top, $width) {
  height: $height;
  left: $left;
  top: $top;
  width: $width;
}

@include export-module('tooltip-layout') {

  .e-tooltip-popup-container {
    position: relative;
  }

  .e-tooltip-wrap {
    max-width: 350px;
    min-width: $tooltip-wrap-min-width;
    padding: $tooltip-zero-padding-margin;
    position: absolute;
    visibility: visible;

    .e-arrow-tip {
      overflow: hidden;
      position: absolute;

      &.e-tip-bottom {
        @include tip-size($tooltip-tip-bottom-height, $tooltip-tip-bottom-left, $tooltip-tip-bottom-top, $tooltip-tip-bottom-width);
      }

      &.e-tip-top {
        @include tip-size($tooltip-tip-top-height, $tooltip-tip-top-left, $tooltip-tip-top-top, $tooltip-tip-top-width);
      }

      &.e-tip-left {
        @include tip-size($tooltip-tip-left-height, $tooltip-tip-left-left, $tooltip-tip-left-top, $tooltip-tip-left-width);
      }

      &.e-tip-right {
        @include tip-size($tooltip-tip-right-height, $tooltip-tip-right-left, $tooltip-tip-right-top, $tooltip-tip-right-width);
      }
    }

    .e-tooltip-close {
      cursor: pointer;
      float: right;
      position: absolute;
      right: $tooltip-close-right;
      top: $tooltip-close-top;
      z-index: inherit;
      @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
        border-radius: $tooltip-nrml-close-border-radius;
        border-width: $tooltip-nrml-close-border;
        box-shadow: $shadow-sm;
        box-sizing: border-box;
        height: $tooltip-nrml-close-height;
        width: $tooltip-nrml-close-width;
      }
      @if ($skin-name == 'tailwind3') {
        height: $tooltip-nrml-close-height;
        width: $tooltip-nrml-close-width;
      }
    }

    .e-tip-content {
      background-color: inherit;
      height: $tooltip-full-height;
      line-height: $tooltip-line-height;
      overflow-wrap: break-word;
      overflow-x: hidden;
      padding: $tooltip-horizontal-padding $tooltip-vertical-padding;
      position: relative;
      white-space: normal;
      width: $tooltip-full-width;
      word-break: break-word;
      z-index: 1;
      @if $skin-name == 'bootstrap4' {
        border-radius: inherit;
      }
      @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5') {
        font-weight: 500;
      }
    }

    &.e-rtl {
      .e-tooltip-close::before {
        @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
          font-size: $tooltip-close-before-font-size;
          margin-right: $tooltip-close-before-margin-right;
        }
        @if $skin-name == 'tailwind' {
          font-size: 8px;
          margin-right: 3px;
        }
      }
    }
  }
  .e-tooltip-content-placeholder {
    display: none;
  }
}

@include export-module('tooltip-theme') {

  .e-tooltip-wrap {
    border-radius: $tooltip-border-radius;

    @if ($skin-name != 'tailwind' and $skin-name != 'tailwind3' and $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'FluentUI') {
      filter: $tooltip-drop-shadow;
      opacity: $tooltip-opacity;
    }

    &.e-popup {
      background-color: $tooltip-content-bg-color;
      border: $border-size $border-type $tooltip-content-border-color;
      @if ($skin-name == 'FluentUI' or $skin-name == 'fluent2') {
        box-shadow: $tooltip-drop-shadow;
        filter: $tooltip-drop-shadow-filter;
      }
    }

    .e-arrow-tip-outer {
      height: $tooltip-zero-height;
      left: 0;
      position: absolute;
      top: 0;
      width: $tooltip-zero-padding-margin;

      &.e-tip-bottom {
        border-left: $tooltip-arrow-outer-border $border-type transparent;
        border-right: $tooltip-arrow-outer-border $border-type transparent;
        border-top: $tooltip-arrow-outer-border $border-type $tooltip-content-border-color;
      }

      &.e-tip-top {
        border-bottom: $tooltip-arrow-outer-border $border-type $tooltip-content-border-color;
        border-left: $tooltip-arrow-outer-border $border-type transparent;
        border-right: $tooltip-arrow-outer-border $border-type transparent;
      }

      &.e-tip-left {
        border-bottom: $tooltip-arrow-outer-border $border-type transparent;
        border-right: $tooltip-arrow-outer-border $border-type $tooltip-content-border-color;
        border-top: $tooltip-arrow-outer-border $border-type transparent;
      }

      &.e-tip-right {
        border-bottom: $tooltip-arrow-outer-border $border-type transparent;
        border-left: $tooltip-arrow-outer-border $border-type $tooltip-content-border-color;
        border-top: $tooltip-arrow-outer-border $border-type transparent;
      }
    }

    .e-arrow-tip-inner {
      height: $tooltip-zero-height;
      position: absolute;
      width: $tooltip-zero-padding-margin;
      z-index: 10;

      &.e-tip-right,
      &.e-tip-left,
      &.e-tip-bottom,
      &.e-tip-top {
        color: $tooltip-content-bg-color;
        font-family: 'e-icons';
        font-size: $tooltip-arrow-icon-font-size;
        font-style: normal;
        font-variant: normal;
        font-weight: normal;
        line-height: 1;
        text-transform: none;
      }

      &.e-tip-bottom,
      &.e-tip-top {
        right: $tooltip-arrow-icon-font-size;
      }

      &.e-tip-right,
      &.e-tip-left {
        bottom: $tooltip-arrow-icon-font-size;
      }
    }

    .e-tooltip-close {
      background-color: $tooltip-icon-bg-normal;
      border-color: $tooltip-icon-border-color;
      @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI') {
        border-radius: 9px;
      }
      @else if ($skin-name == 'tailwind3') {
        border-radius: 50%;
      }
      @else {
        border-radius: 8px;
      }
      color: $tooltip-default-icon-color;
      @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
        border-style: solid;
        border-width: 1px;
        height: 16px;
        width: 16px;
      }
      @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
        border: $tooltip-close-icon-border;
      }

      &:hover {
        @if ($skin-name == 'tailwind') {
          color: $tooltip-hover-icon-color;
        }
        @else {
          background-color: $tooltip-icon-bg-hover;
          color: $tooltip-hover-icon-color;
        }
        @if ($skin-name == 'bootstrap5') {
          border-color: $tooltip-close-icon-border-hover;
        }
      }
    }

    .e-tip-content {
      border-radius: inherit;
      color: $tooltip-content-font-color;
      font-family: $font-family;
      font-size: $tooltip-font-size;
      @if $skin-name == 'bootstrap4' {
        line-height: 1.5;
      }
    }
  }
}

.e-tooltip-wrap {

  /*! Tooltip icons */
  .e-tooltip-close::before {
    content: '\e7e7';
    @if ($skin-name == 'bootstrap5.3') {
      font-size: 8px;
      left: calc(50% - 4px);
      top: calc(50% - 4.5px);
    }

    @else {
      font-size: 10px;
      left: calc(50% - 5.5px);
      top: calc(50% - 5.5px);
    }
    position: absolute;
  }

  .e-arrow-tip-inner.e-tip-right::before {
    content: '\e87e';
  }

  .e-arrow-tip-inner.e-tip-top::before {
    content: '\e87a';
  }

  .e-arrow-tip-inner.e-tip-bottom::before {
    content: '\e70d';
  }

  .e-arrow-tip-inner.e-tip-left::before {
    content: '\e87d';
  }
}

@include export-module('tooltip-bigger') {
  .e-bigger .e-tooltip-wrap,
  .e-tooltip-wrap.e-bigger {

    .e-tooltip-close {
      @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
        border-radius: $tooltip-bgr-close-border-radius;
        border-width: $tooltip-bgr-close-border;
        height: $tooltip-bgr-close-height;
        width: $tooltip-bgr-close-width;
      }

      &::before {
        @if ($skin-name == 'tailwind') {
          font-size: 10px;
          vertical-align: middle;
        }

        @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
          font-size: $tooltip-bgr-before-font-size;
          left: $tooltip-bgr-before-left;
        }
      }
    }

    .e-tip-content {
      line-height: $tooltip-tip-content-line-height;
      padding: $tooltip-mobile-horizontal-padding $tooltip-mobile-vertical-padding;
    }

    &.e-rtl {
      .e-tooltip-close::before {
        @if ($skin-name == 'tailwind') {
          font-size: 10px;
          margin-right: 4px;
        }
      }
    }
  }

  .e-bigger .e-tooltip-wrap .e-tip-content,
  .e-tooltip-wrap.e-bigger .e-tip-content {
    font-size: $tooltip-mobile-font-size;
  }
}