@use 'ej2-base/styles/common/mixin' as *;

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