@import "../../assets/scss/main";

$distanceFromActivator: 4px;
$arrowIconHeight: 8px;
$arrowMargin: 12px;
$verticalArrowMargin: 4px;
$tooltipMaxWidth: 224px;


.tooltip {
  display: none;

  &__wrapper {
    display: inline-flex;
    position: relative;
  }

  &__content {
    display: flex;
    align-items: center;
    @include captionOne;
    font-weight: $regular;
    color: $white;
    white-space: nowrap;
  }

  &.fixedWidth {
    max-width: $tooltipMaxWidth;
    width: max-content;

    .tooltip {
      &__content {
        white-space: normal;
        word-break: break-word;
      }
    }
  }

  &__arrow {
    position: absolute;
  }

  &__activator {
    cursor: pointer;

    &:hover {
      + .tooltip {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        background: $gray700;
        padding: 8px 12px;
        border-radius: 6px;

        &.bottom {
          top: calc(100% + #{$distanceFromActivator} + #{$arrowIconHeight});
          left: 50%;
          transform: translate(-50%, 0);

          .tooltip__arrow {
            bottom: calc(100% - 1px);
            left: 50%;
            transform: translate(-50%, 0);
          }
        }

        &.bottomLeft {
          top: calc(100% + #{$distanceFromActivator} + #{$arrowIconHeight});
          right: 0;

          .tooltip__arrow {
            bottom: calc(100% - 1px);
            right: $arrowMargin;
          }
        }

        &.bottomRight {
          top: calc(100% + #{$distanceFromActivator} + #{$arrowIconHeight});
          left: 0;

          .tooltip__arrow {
            bottom: calc(100% - 1px);
            left: $arrowMargin;
          }
        }

        &.top {
          bottom: calc(100% + #{$distanceFromActivator} + #{$arrowIconHeight});
          left: 50%;
          transform: translate(-50%, 0);

          .tooltip__arrow {
            top: calc(100% - 1px);
            left: 50%;
            transform: translate(-50%, 0) rotateZ(180deg);
          }
        }

        &.topLeft {
          bottom: calc(100% + #{$distanceFromActivator} + #{$arrowIconHeight});
          right: 0;

          .tooltip__arrow {
            top: calc(100% - 1px);
            right: $arrowMargin;
            transform: rotateZ(180deg);
          }
        }

        &.topRight {
          bottom: calc(100% + #{$distanceFromActivator} + #{$arrowIconHeight});
          left: 0;

          .tooltip__arrow {
            top: calc(100% - 1px);
            left: $arrowMargin;
            transform: rotateZ(180deg);
          }
        }

        &.left {
          bottom: 50%;
          right: calc(100% + #{$distanceFromActivator} + #{$arrowIconHeight});
          transform: translate(0, 50%);

          .tooltip__arrow {
            left: calc(100% - #{$verticalArrowMargin});
            top: calc(50% - #{$arrowIconHeight} / 2);
            transform: rotateZ(90deg);
          }
        }

        &.right {
          bottom: 50%;
          left: calc(100% + #{$distanceFromActivator} + #{$arrowIconHeight});
          transform: translate(0, 50%);

          .tooltip__arrow {
            right: calc(100% - #{$verticalArrowMargin});
            top: calc(50% - #{$arrowIconHeight} / 2);
            transform: rotateZ(270deg);
          }
        }
      }
    }
  }
}