@use "sass:map";
@use 'theme-variables' as *;

@function tooltip-tip-get($direction, $property) {
  @return map.get(map.get($tooltip-tip-directions, $direction), $property);
}

@mixin tip-size($direction) {
  left: tooltip-tip-get($direction, 'left');
  top: tooltip-tip-get($direction, 'top');
}

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

  .sf-tooltip-wrap {
    max-width: $tooltip-wrapper-max-width;
    min-width: $tooltip-wrapper-min-width;
    position: absolute;
  }

  .sf-tooltip-arrow-bottom {
    @include tip-size('bottom');
  }

  .sf-tooltip-arrow-top {
    @include tip-size('top');
  }

  .sf-tooltip-arrow-left {
    @include tip-size('left');
  }

  .sf-tooltip-arrow-right {
    @include tip-size('right');
  }

  .sf-tooltip-arrow-x {
    height: $tooltip-arrow-x-height;
    width: $tooltip-arrow-x-width;
  }

  .sf-tooltip-arrow-y {
    height: $tooltip-arrow-y-height;
    width: $tooltip-arrow-y-width;
  }

  .sf-tooltip-close {
    cursor: pointer;
    position: absolute;
    right: $tooltip-close-icon-right;
    top: $tooltip-close-icon-top;
    box-shadow: $tooltip-close-icon-box-shadow;
    display: flex;
    padding: $tooltip-close-icon-padding;

    svg {
      font-size: $tooltip-close-icon-font-size;
    }
  }

  .sf-tooltip-content {
    overflow-x: hidden;
    padding: $tooltip-content-padding;
    position: relative;
  }
}