@use "config";
@use "mixins";
@use "variables";
@use "sass:map";

@mixin tooltip {
  $triangle: map.get(config.$radius, "default");
  $background-color: rgba(map.get(variables.$greyscale, "dark"), 0.9);

  cursor: pointer;
  line-height: 1;
  position: relative;

  &::after {
    background-color: $background-color;
    border-radius: $triangle;
    color: map.get(variables.$greyscale, "white");
    font-size: map.get(variables.$font-scale, "sm");
    font-weight: normal;
    line-height: 1.15rem;
    opacity: 0;
    padding: map.get(variables.$spacers, 1) map.get(variables.$spacers, 2);
    position: absolute;
    text-align: center;
    text-transform: none;
    transition: opacity var(--transitions);
    visibility: hidden;
    white-space: nowrap;
    z-index: 1;
  }

  @each $direction, $d in variables.$xy-border {
    &.tooltip-#{$direction} {
      // arrows
      &::before {
        border-style: solid;
        border-width: $triangle;
        content: "";
        opacity: 0;
        position: absolute;
        transition: opacity var(--transitions);
        visibility: hidden;
        @if $direction == top {
          border-color: $background-color transparent transparent transparent;
          top: 0;
          left: 50%;
          margin-left: -$triangle;
        } @else if $direction == bottom {
          border-color: transparent transparent $background-color transparent;
          bottom: 0;
          left: 50%;
          margin-left: -$triangle;
        } @else if $direction == left {
          border-color: transparent transparent transparent $background-color;
          top: $triangle;
          right: calc(110% - #{$triangle});
          margin-top: -$triangle;
        } @else if $direction == right {
          border-color: transparent $background-color transparent transparent;
          top: 50%;
          top: $triangle;
          left: calc(110% - #{$triangle});
          margin-top: -$triangle;
        }
      }

      &::after {
        @if $direction == top {
          bottom: 100%;
          left: 50%;
          transform: translate(-50%);
        } @else if $direction == bottom {
          top: 100%;
          left: 50%;
          transform: translate(-50%);
        } @else if $direction == left {
          top: -$triangle;
          right: calc(110% + #{$triangle});
        } @else if $direction == right {
          top: -$triangle;
          left: calc(110% + #{$triangle});
        }
      }
    }
  }

  &.tooltip-mobile {
    @include mixins.breakpoint(tablet, max) {
      &::before {
        display: none;
      }

      &:after {
        font-size: 1rem;
        max-width: 20rem;
        position: fixed;
        bottom: auto;
        top: 50%;
        left: 50%;
        text-align: left;
        transform: translate(-50%, -50%);
        white-space: normal;
      }
    }
  }

  &.tooltip-inline {
    border-bottom: 2px dotted map.get(config.$brand-colors, "med-blue");
    display: inline-block;
  }

  &:hover::after,
  &[class*="tooltip-"]:hover::before {
    visibility: visible;
    opacity: 1;
  }
}

[data-tooltip] {
  @include tooltip;

  &:after {
    content: attr(data-tooltip);
  }
}

// not fully realized :(
.tooltip--help {
  color: map.get(config.$brand-colors, "med-blue") !important;
}