// Outer most element (contains both the triggering element and tooltip itself)
.euiTooltip {
  display: inline-block;
}

// The tooltip itself (for positioning, sizing, animating)
.euiTooltip__container {
  position: absolute; // TODO: Change to fixed position?

  // SIZING
  &.euiTooltip--small {
    @include euiTooltipSize(10);
  }

  &.euiTooltip--medium {
    @include euiTooltipSize(15);
  }

  &.euiTooltip--large {
    @include euiTooltipSize(30);
  }

  // ANIMATING -- with slight delay
  transition:
    opacity $euiAnimSpeedNormal ease-out $euiAnimSpeedSlow,
    visibility $euiAnimSpeedNormal ease-out $euiAnimSpeedSlow,
    transform $euiAnimSpeedNormal ease-out $euiAnimSpeedSlow;
  opacity: 0;
  visibility: hidden;
  transform: translateX(0) translateY($euiSize * -1) translateY(0); // default starting position of top

  // Don't delay the animation if the tooltip is on click
  .euiTooltip--click & {
    transition:
      opacity $euiAnimSpeedNormal ease-out,
      visibility $euiAnimSpeedNormal ease-out,
      transform $euiAnimSpeedNormal ease-out;
  }

  &.euiTooltip-isVisible {
    opacity: 1;
    visibility: visible;
    transform: translateX(0) translateY(0) translateZ(0) !important;
              // Using important here so we're always at (0,0,0) when visible, no matter the position.
              // May need to revisit if we find override issues.
  }

    // Starting positions
    .euiTooltip--right & {
      transform: translateX($euiSize) translateY(0) translateZ(0);
    }

    .euiTooltip--bottom & {
      transform: translateX(0) translateY($euiSize) translateZ(0);
    }

    .euiTooltip--left & {
      transform: translateX($euiSize * -1) translateY(0) translateZ(0);
    }
}

  // The tooltip content (for styling)

  .euiTooltip__content {

    // Scoped variables for component-only re-use
    $background-color: $euiColorDarkestShade;
    $text-color: $euiColorEmptyShade;
    $arrow-size: $euiSize;

    // STYLING
    @include euiBottomShadow;
    @include euiFontSizeS();
    background-color: $background-color;
    border-radius: $euiBorderRadius;
    padding: $euiSizeM;
    color: $text-color;
    white-space: nowrap;

    // ARROW
    position: relative;
    &::before {
      content: "";
      position: absolute;
      bottom: -$arrow-size/2;
      left: 50%;
      transform: translateX(-50%) rotateZ(45deg);
      transform-origin: center;
      background-color: $background-color;
      width: $arrow-size;
      height: $arrow-size;

      // Positions
      .euiTooltip--right & {
        bottom: 50%;
        left: -$arrow-size/2;
        transform: translateY(50%) rotateZ(45deg);
      }

      .euiTooltip--bottom & {
        bottom: auto;
        top: -$arrow-size/2;
      }

      .euiTooltip--left & {
        bottom: 50%;
        left: auto;
        right: -$arrow-size/2;
        transform: translateY(50%) rotateZ(45deg);
      }
    }
  }

  // The tooltip title if it exists
  .euiTooltip__title {
    @include euiFontSize;
    font-weight: $euiFontWeightMedium;
    margin-bottom: $euiSizeS;
    border-bottom: $euiBorderWidthThin solid $euiColorDarkShade;
  }
