/*!
 * SPDX-License-Identifier: Apache-2.0
 *
 * The OpenSearch Contributors require contributions made to
 * this file be licensed under the Apache-2.0 license or a
 * compatible open source license.
 *
 * Modifications Copyright OpenSearch Contributors. See
 * GitHub history for details.
 */

/*
 * 1. Shift arrow 1px more than half its size to account for border radius
 */

.ouiToolTip {
  @include ouiToolTipStyle;
  @include ouiToolTipAnimation('top');
  position: absolute;
  opacity: 0;

  // Custom sizing
  $arrowSize: $ouiSizeM;
  $arrowPlusSize: (($arrowSize/2) + 1px) * -1; /* 1 */
  $arrowMinusSize: (($arrowSize/2) - 1px) * -1; /* 1 */

  .ouiToolTip__arrow {
    content: '';
    position: absolute;
    transform-origin: center;
    border-radius: 2px;
    background-color: $ouiTooltipBackgroundColor;
    width: $arrowSize;
    height: $arrowSize;

    transform: translateY($arrowPlusSize) rotateZ(45deg); /* 1 */
  }

  // Positions the arrow and animates in from the same side.
  &.ouiToolTip--right {
    animation-name: ouiToolTipRight;

    .ouiToolTip__arrow {
      transform: translateX($arrowMinusSize) rotateZ(45deg); /* 1 */
    }
  }

  &.ouiToolTip--bottom {
    animation-name: ouiToolTipBottom;

    .ouiToolTip__arrow {
      transform: translateY($arrowMinusSize) rotateZ(45deg); /* 1 */
    }
  }

  &.ouiToolTip--left {
    animation-name: ouiToolTipLeft;

    .ouiToolTip__arrow {
      transform: translateX($arrowPlusSize) rotateZ(45deg); /* 1 */
    }
  }

  .ouiToolTip__title {
    @include ouiToolTipTitle;
  }
}

.ouiToolTipAnchor {
  display: inline-block;

  // disabled elements don't fire mouse events which means leaving a disabled element
  // wouldn't trigger the onMouseOut and hide the tooltip; disabling pointer events
  // on disabled elements means any mouse events remain handled by parent elements
  // https://jakearchibald.com/2017/events-and-disabled-form-fields/
  *[disabled] {
    pointer-events: none;
  }

  &.ouiToolTipAnchor--displayBlock {
    display: block;
  }
}

// Keyframes to animate in the tooltip.
@keyframes ouiToolTipTop {
  0% {
    opacity: 0;
    transform: translateY(-$ouiSize);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ouiToolTipBottom {
  0% {
    opacity: 0;
    transform: translateY($ouiSize);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ouiToolTipLeft {
  0% {
    opacity: 0;
    transform: translateX(-$ouiSize);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ouiToolTipRight {
  0% {
    opacity: 0;
    transform: translateX($ouiSize);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}