////
/// Tooltip Module : tooltip
/// @group tooltip
////

@use 'src/module/spacing';
@use 'src/module/preference';

#{ns(tooltip)} {
  --arrow-x: 0;
  // TODO : Add Sass lint rule to allow decimal value into calc() function [https://stylelint.io/user-guide/rules/unit-no-unknown/]
  $decimalVUnity: 1.5v;
  display: block;
  @include max-width('min(96v, calc((100vw - 8v) * 2 / 3))');
  @include padding(2v 2v 5v);
  @include text-style(xs);
  opacity: 1;
  visibility: visible;
  transition: opacity 0s 0.15s, visibility 0s 0.15s;
  text-align: left;
  background-repeat: no-repeat;
  background-position: spacing.space(calc(50% + var(--arrow-x)) calc(100% - 2v)), spacing.space(calc(50% + var(--arrow-x)) calc(100% - $decimalVUnity)), spacing.space(50% calc(100% - 3v)), spacing.space(50% calc(100% - 3v));
  background-size: spacing.space(2v 1.5v), spacing.space(2v 1.5v), 100% 1px, spacing.space(100% calc(100% - 3v));
  white-space: normal;

  @include preference.forced-colors {
    outline: 1px solid;
    background: canvas;
  }

  &:not(&--shown) {
    display: none;
    opacity: 0;
  }

  &--hidding {
    opacity: 0;
  }

  &#{ns(placement)} {
    &--bottom {
      @include padding-top(5v);
      @include padding-bottom(2v);
      background-position-y: spacing.space('2v, 1.5v, 3v, 3v');
    }

    @include preference.forced-colors {
      @include padding(2v);
    }
  }
}