@use '../../internals/Box/styles/index' as box;
@use '../../styles/mixins/utilities' as utils;
@use '../../styles/mixins/color-modes' as color-modes;
@use './mixins' as tooltip-mixins;

//
// Tooltips
// --------------------------------------------------

// Base class
.rs-tooltip {
  --rs-tooltip-border-radius: var(--rs-radius-sm);
  --rs-tooltip-padding-block: 4px;
  --rs-tooltip-padding-inline: 10px;
  --rs-tooltip-z-index: var(--rs-zindex-tooltip);
  --rs-tooltip-max-width: 250px;
  --rs-tooltip-line-height: var(--rs-text-line-height-xs);
  --rs-tooltip-position-x: var(--rs-position-x);
  --rs-tooltip-position-y: var(--rs-position-y);
  --rs-tooltip-opacity: var(--rs-opacity, 0);
  --rs-tooltip-arrow-gap-sm: var(--rs-spacing);
  --rs-tooltip-arrow-gap-lg: calc(var(--rs-spacing) * 2.5);
  --rs-tooltip-translate-distance: 2px;
  --rs-tooltip-arrow-width: 6px;

  position: absolute;
  top: var(--rs-tooltip-position-y);
  left: var(--rs-tooltip-position-x);
  z-index: var(--rs-tooltip-z-index);
  display: block;
  font-size: var(--rs-font-size-xs);
  opacity: var(--rs-tooltip-opacity);
  line-height: var(--rs-tooltip-line-height);
  max-width: var(--rs-tooltip-max-width);
  padding: var(--rs-tooltip-padding-block) var(--rs-tooltip-padding-inline);
  color: var(--rs-tooltip-text);
  background-color: var(--rs-tooltip-bg);
  border-radius: var(--rs-tooltip-border-radius);
  overflow-wrap: break-word;

  &.rs-anim-fade {
    transition:
      opacity 0.1s linear,
      transform 0.1s ease-out;
  }

  &.rs-anim-in {
    opacity: 1;
    transition:
      opacity 0.15s linear,
      transform 0.15s ease-in;
  }

  // Arrows
  &-arrow::before,
  &-arrow::after {
    content: ' ';
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
  }

  &-arrow::before {
    display: none;
  }

  @include color-modes.high-contrast-mode {
    border: 1px solid var(--rs-border-primary);

    &-arrow::before {
      display: block;
    }
  }

  // Common style for .placement-top*
  &:where([data-placement*='top']) {
    margin-top: calc((var(--rs-tooltip-arrow-width) + 2px) * -1);
    @include tooltip-mixins.set-translate-transition(0, calc(var(--rs-tooltip-translate-distance) * -1));

    @include tooltip-mixins.with-tooltip-arrow(bottom);
  }

  // Common style for .placement-bottom*
  &:where([data-placement*='bottom']) {
    margin-top: calc(var(--rs-tooltip-arrow-width) + 2px);
    @include tooltip-mixins.set-translate-transition(0, var(--rs-tooltip-translate-distance));

    @include tooltip-mixins.with-tooltip-arrow(top);
  }

  // Arrow positioning for different placements
  // Vertical centered arrow
  &:where([data-placement='bottom'], [data-placement='top']) {
    &::before,
    &::after {
      inset-inline-start: 50%;
    }
  }

  &:where([data-placement='bottom-start'], [data-placement='top-start']) {
    &::before,
    &::after {
      inset-inline-start: var(--rs-tooltip-arrow-gap-lg);
    }
  }

  &:where([data-placement='bottom-end'], [data-placement='top-end']) {
    &::before {
      inset-inline-end: calc(var(--rs-tooltip-arrow-gap-sm) - 1px);
    }

    &::after {
      inset-inline-end: var(--rs-tooltip-arrow-gap-sm);
    }
  }

  // Horizontal centered arrow
  &:where([data-placement='left'], [data-placement='right']) {
    &::before,
    &::after {
      top: 50%;
    }
  }

  // Horizontal start arrow
  &:where([data-placement='left-start'], [data-placement='right-start']) {
    &::before,
    &::after {
      top: var(--rs-tooltip-arrow-gap-lg);
    }
  }

  // Horizontal end arrow
  &:where([data-placement='left-end'], [data-placement='right-end']) {
    &::before {
      bottom: calc(var(--rs-tooltip-arrow-gap-sm) - 1px);
    }
    &::after {
      bottom: var(--rs-tooltip-arrow-gap-sm);
    }
  }

  // Common style for .placement-right*
  &:where([data-placement*='right']) {
    margin-left: calc(var(--rs-tooltip-arrow-width) + 2px);
    @include tooltip-mixins.set-translate-transition(var(--rs-tooltip-translate-distance), 0);

    @include tooltip-mixins.with-tooltip-arrow(left);
  }

  // Common style for .placement-left*
  &:where([data-placement*='left']) {
    margin-left: calc((var(--rs-tooltip-arrow-width) + 2px) * -1);
    @include tooltip-mixins.set-translate-transition(calc(var(--rs-tooltip-translate-distance) * -1), 0);
    @include tooltip-mixins.with-tooltip-arrow(right);
  }
}