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

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

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

  .sf-tooltip-wrap {
    max-width: 350px;
    min-width: 30px;
    padding: 0;
    position: absolute;
    visibility: visible;

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

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

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

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

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

    .sf-tooltip-close {
      cursor: pointer;
      float: right;
      position: absolute;
      right: $tooltip-close-icon-right;
      top: $tooltip-close-icon-top;
      z-index: inherit;
      height: $tooltip-close-icon-height;
      width: $tooltip-close-icon-width;
      border-width: $tooltip-close-icon-border-width;
      box-shadow: $tooltip-close-icon-box-shadow;
      box-sizing: $tooltip-close-icon-box-sizing;
    }

    .sf-tip-content {
      background-color: inherit;
      height: 100%;
      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: 100%;
      word-break: break-word;
      z-index: 1;
    }

    .sf-tooltip-close svg {
      font-size: 12px;
      left: calc(50% - 6px);
      position: absolute;
      top: calc(50% - 6px);
    }
  }
}