/* #############################################################################
# TOOLTIPS
############################################################################# */


.has-tooltip {
  position: relative;

  // Tooltip corner
  &::before {
    content: "";
    display: none;
    border-style: solid;
    width: 0;
    height: 0;
    position: absolute;
    z-index: 999;
  }

  // Tooltip body
  &::after {
    content: attr(data-tooltip);
    display: none;
    background: $color-text;
    color: #fff;
    font-size: rem-calc(14px);
    font-weight: 400;
    padding: 8px 12px;
    width: max-content;
    max-width: 300px;
    position: absolute;
    z-index: 999;

    @include border-radius(3px);

  }

  // POSITION STYLES

  &[data-tooltip-position="top"] {
    &::before {
      border-width: 5px 5px 0;
      border-color: $color-text transparent transparent transparent;
      inset: 0 auto auto 50%;

      @include transform(translate(-50%, -100%));
    }

    &::after {
      inset: -5px auto auto 50%;

      @include transform(translate(-50%, -100%));
    }
  }

  &[data-tooltip-position="right"] {
    &::before {
      border-width: 5px 5px 5px 0;
      border-color: transparent $color-text transparent transparent;
      inset: 50% 0 auto auto;

      @include transform(translate(100%, -50%));
    }

    &::after {
      inset: 50% -5px auto auto;

      @include transform(translate(100%, -50%));
    }
  }

  &[data-tooltip-position="bottom"] {
    &::before {
      border-width: 0 5px 5px;
      border-color: transparent transparent $color-text;
      inset: auto auto 0 50%;

      @include transform(translate(-50%, 100%));
    }

    &::after {
      inset: auto auto -5px 50%;

      @include transform(translate(-50%, 100%));
    }
  }

  &[data-tooltip-position="left"] {
    &::before {
      border-width: 5px 0 5px 5px;
      border-color: transparent transparent transparent $color-text;
      inset: 50% auto auto 0;

      @include transform(translate(-100%, -50%));
    }

    &::after {
      inset: 50% auto auto -5px;

      @include transform(translate(-100%, -50%));
    }
  }

  // HOVER / MAKE THEM VISIBLE
  &:hover {
    &::before {
      display: block;
    }

    &::after {
      display: block;
    }
  }
}