@use "sass:math" as math;
@use "../../../styles/tokens/base";
@use "../../../styles/tools/generate";
@use "../../../styles/tools/convert";
@use "../../../styles/tools/layout";
@use "./config";

@mixin tooltip($config: config.$layout, $offset: config.$offset) {
  position: absolute;
  opacity: 0;
  transition: opacity 200ms ease-out;
  transform: translate3d(0, 0, 0);

  @include generate.css-map($config);

  > *:last-child {
    margin-bottom: 0;
  }

  @each $direction, $opposite in config.$direction-opposites {
    &[data-popper-placement^="#{$direction}"] {
      padding-#{$opposite}: $offset;
    }
  }
}

@mixin tooltip-visible {
  opacity: 1;
}

@mixin dialog($config: config.$dialog) {
  @include generate.css-map($config);
  @include layout.reset-last-child-margin-bottom;
}

@mixin arrow(
  $size: config.$arrow-size,
  $color: config.$arrow-color,
  $border: config.$border,
  $offset: config.$offset
) {
  $size-unitless: convert.strip-units($size);
  $hypotenuse: math.sqrt(
      math.pow($size-unitless, 2) + math.pow($size-unitless, 2)
    ) *
    1rem;
  $arrow-position: $offset - math.div($hypotenuse, 4);

  display: block;

  &::before {
    content: "";
    display: block;
    width: $size;
    height: $size;
    background-color: $color;
    background-clip: padding-box;
    border: $border;
    transform: rotate(45deg);
  }

  @each $direction, $opposite in config.$direction-opposites {
    [data-popper-placement^="#{$direction}"] & {
      #{$opposite}: $arrow-position;
    }
  }

  @each $direction, $reset-directions in config.$direction-border-color-reset {
    [data-popper-placement^="#{$direction}"] &:before {
      @each $reset-direction in $reset-directions {
        border-#{$reset-direction}-color: transparent;
      }
    }
  }
}

@mixin info-tooltip {
  position: relative;
  display: inline-flex;
  vertical-align: -0.1em;
  @include base.focusring-round;

  &::before {
    content: "";
    position: absolute;
    top: convert.to-rem(-10px);
    left: convert.to-rem(-10px);
    width: calc(100% + #{convert.to-rem(20px)});
    height: calc(100% + #{convert.to-rem(20px)});
  }
}

@mixin info-tooltip-active-icon {
  color: config.$icon-active-color;
}