/*#############################################################################
# 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 5px;
      border-color: $color-text transparent transparent transparent;
      top: 0;
      right: auto;
      bottom: auto;
      left: 50%;
      @include transform(translate(-50%, -100%));
    }

    &::after {
      top: -5px;
      right: auto;
      bottom: auto;
      left: 50%;
      @include transform(translate(-50%, -100%));
    }
  }

  &[data-tooltip-position="right"] {
    &::before {
      border-width: 5px 5px 5px 0;
      border-color: transparent $color-text transparent transparent;
      top: 50%;
      right: 0;
      bottom: auto;
      left: auto;
      @include transform(translate(100%, -50%));
    }

    &::after {
      top: 50%;
      right: -5px;
      bottom: auto;
      left: auto;
      @include transform(translate(100%, -50%));
    }
  }

  &[data-tooltip-position="bottom"] {
    &::before {
      border-width: 0 5px 5px 5px;
      border-color: transparent transparent $color-text transparent;
      top: auto;
      right: auto;
      bottom: 0;
      left: 50%;
      @include transform(translate(-50%, 100%));
    }

    &::after {
      top: auto;
      right: auto;
      bottom: -5px;
      left: 50%;
      @include transform(translate(-50%, 100%));
    }
  }

  &[data-tooltip-position="left"] {
    &::before {
      border-width: 5px 0 5px 5px;
      border-color: transparent transparent transparent $color-text;
      top: 50%;
      right: auto;
      bottom: auto;
      left: 0;
      @include transform(translate(-100%, -50%));
    }

    &::after {
      top: 50%;
      right: auto;
      bottom: auto;
      left: -5px;
      @include transform(translate(-100%, -50%));
    }
  }

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

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