---

/*#region own classes*/

/* #region Tooltip */
/* .tooltip-container {
  width: fit-content;
} */

.tooltip {
  z-index: 100;
  width: max-content;
}

/* #region Tooltip Top */

/* Update function for location top Tooltip */

/* .tooltip.top,
.tooltip.top-left,
.tooltip.top-right {
  bottom: calc(100% + 10px);
}

.tooltip.top.no-direction,
.tooltip.top-left.no-direction,
.tooltip.top-right.no-direction {
  bottom: calc(100% + 4px);
}

.tooltip.top-left.xs {
  left: calc(50% - 14px);
}

.tooltip.top-left.sm {
  left: calc(50% - 18px);
}

.tooltip.top-right.xs {
  right: calc(50% - 14px);
}

.tooltip.top-right.sm {
  right: calc(50% - 18px);
} */

/* #endregion */

/* #region Tooltip Bottom */

/* Update function for location bottom Tooltip */

/* .tooltip.bottom,
.tooltip.bottom-left,
.tooltip.bottom-right {
  top: calc(100% + 10px);
}

.tooltip.bottom.no-direction,
.tooltip.bottom-left.no-direction,
.tooltip.bottom-right.no-direction {
  top: calc(100% + 4px);
}

.tooltip.bottom-left.xs {
  left: calc(50% - 14px);
}

.tooltip.bottom-left.sm {
  left: calc(50% - 18px);
}

.tooltip.bottom-right.xs {
  right: calc(50% - 14px);
}

.tooltip.bottom-right.sm {
  right: calc(50% - 18px);
} */

/* #endregion */

/* #region Tooltip Left */

/* This option of using the tooltip is currently not being solved */

/* .tooltip.left,
.tooltip.left-top,
.tooltip.left-bottom{
    right: calc(100% + 10px);
}

.tooltip.left.no-direction,
.tooltip.left-top.no-direction,
.tooltip.left-bottom.no-direction{
    right: calc(100% + 4px);
}

.tooltip.left-top.xs{
    top: calc(50% - 10px);
}

.tooltip.left-top.sm{
    top: calc(50% - 12px);
}

.tooltip.left-bottom.xs{
    bottom: calc(50% - 10px);
}

.tooltip.left-bottom.sm{
    bottom: calc(50% - 12px)
} */

/* #endregion */

/* #region Tooltip Right */

/* Update function for location right Tooltip */

/* .tooltip.right,
.tooltip.right-top,
.tooltip.right-bottom {
  left: calc(100% + 10px);
}

.tooltip.right.no-direction,
.tooltip.right-top.no-direction,
.tooltip.right-bottom.no-direction {
  left: calc(100% + 4px);
}

.tooltip.right-top.xs {
  top: calc(50% - 10px);
}

.tooltip.right-top.sm {
  top: calc(50% - 12px);
}

.tooltip.right-bottom.xs {
  bottom: calc(50% - 10px);
}

.tooltip.right-bottom.sm {
  bottom: calc(50% - 12px);
} */

/* #endregion */

/* #region Tooltip Animation */

.tooltip-animation {
  animation: hover-animation 0.7s linear;
}

@keyframes hover-animation {
  from {
    opacity: 0;
  }
  60% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* #endregion */

/* #endregion */

/* #region Arrow */

.tooltip-arrow {
  border: solid transparent;
  position: absolute;
  width: 12px;
  height: 12px;
  z-index: 100;
  transform: rotate(270deg);
}

.tooltip-border-rigth-color {
  @apply border-r-neutral-900;
}

.tooltip-contrast-border-rigth-color {
  @apply border-r-white;
}

/* #region Arrow Top */

.tooltip-arrow.top,
.tooltip-arrow.top-left,
.tooltip-arrow.top-right {
  bottom: -12px;
}

.tooltip-arrow.top {
  left: calc(50% - 6px);
}

.tooltip-arrow.top-left.xs {
  left: 8px;
}

.tooltip-arrow.top-left.sm {
  left: 12px;
}

.tooltip-arrow.top-right.xs {
  right: 8px;
}

.tooltip-arrow.top-right.sm {
  right: 12px;
}

/* #endregion */

/* #region Arrow Bottom */

.tooltip-arrow.bottom,
.tooltip-arrow.bottom-left,
.tooltip-arrow.bottom-right {
  top: -12px;
  transform: rotate(90deg);
}

.tooltip-arrow.bottom {
  left: calc(50% - 6px);
}

.tooltip-arrow.bottom-left.xs {
  left: 8px;
}

.tooltip-arrow.bottom-left.sm {
  left: 12px;
}

.tooltip-arrow.bottom-right.xs {
  right: 8px;
}

.tooltip-arrow.bottom-right.sm {
  right: 12px;
}

/* #endregion */

/* #region Arrow Left */

/* This option of using the tooltip is currently not being solved */

/* .tooltip-arrow.left,
.tooltip-arrow.left-top,
.tooltip-arrow.left-bottom{
    right: -12px;
    transform: rotate(180deg);
}

.tooltip-arrow.left{
    top: calc(50% - 6px);
}

.tooltip-arrow.left-top.xs{
    top: 4px;
}

.tooltip-arrow.left-top.sm{
    top: 6px
}

.tooltip-arrow.left-bottom.xs{
    bottom: 4px;
}

.tooltip-arrow.left-bottom.sm{
    bottom: 6px
} */

/* #endregion */

/* #region Arrow Right */

.tooltip-arrow.right,
.tooltip-arrow.right-top,
.tooltip-arrow.right-bottom {
  left: -12px;
  transform: rotate(0deg);
}

.tooltip-arrow.right {
  top: calc(50% - 6px);
}

.tooltip-arrow.right-top.xs {
  top: 4px;
}

.tooltip-arrow.right-top.sm {
  top: 6px;
}

.tooltip-arrow.right-bottom.xs {
  bottom: 4px;
}

.tooltip-arrow.right-bottom.sm {
  bottom: 6px;
}

/* #endregion */

/* #endregion */

/* #endregion */

/* #region Color */

.tooltip-default-bg {
  @apply bg-neutral-900;
}

.tooltip-contrast-bg {
  @apply bg-neutral-0;
}

.tooltip-default-color {
  @apply text-neutral-0;
}

.tooltip-contrast-color {
  @apply text-neutral-900;
}

.tooltip-focusShadow-color {
  @apply focus:shadow-component-focus;
}

/* #endregion */

/* #region Size */

.tooltip-xs-height {
  min-height: 24px;
}

.tooltip-sm-height {
  min-height: 32px;
}

.tooltip-max-width {
  @apply max-w-[200px];
}

.tooltip-arrow-size {
  border-width: 6px;
}

/* #endregion */

/* #region Space */

.tooltip-xs-padding-horizontal {
  @apply px-0500;
}

.tooltip-sm-padding-horizontal {
  @apply px-0750;
}

.tooltip-xs-padding-vertical {
  @apply py-0250;
}

.tooltip-sm-padding-vertical {
  @apply py-0375;
}

/* #endregion */

/* #region Radius */

.tooltip-border-radius {
  @apply rounded-xxs;
}

/* #endregion */

/* #region Typography */

.tooltip-xs-default-contast-text-color {
  @apply text-caption-regular;
}

.tooltip-sm-default-contast-text-color {
  @apply text-body3-regular;
}

/* #endregion */

















export const calculateTooltipPosition = (tooltipMain, tooltipHint, location, direction, distBetweenElementAndTooltip, distBetweenSideAndArrowHorizontal, distBetweenSideAndArrowVertical, marginBetweenTooltipAndElement, transferTooltip) => {
    const positionChildrenElement = tooltipMain.current.getBoundingClientRect();
      if (direction) {
        if (location === 'top-left'){
          tooltipHint.current.style.left = `${positionChildrenElement.left + 
            positionChildrenElement.width/2 - 
            distBetweenSideAndArrowHorizontal}px`;
          tooltipHint.current.style.top = `${positionChildrenElement.top - 
            tooltipHint.current?.offsetHeight - 
            distBetweenElementAndTooltip + window.scrollY}px`;
        }
        if (location === 'top-right'){
          tooltipHint.current.style.left = `${positionChildrenElement.left + 
            positionChildrenElement.width/2 - 
            tooltipHint.current.offsetWidth + distBetweenSideAndArrowHorizontal}px`;
          tooltipHint.current.style.top = `${positionChildrenElement.top - 
            tooltipHint.current?.offsetHeight - 
            distBetweenElementAndTooltip + window.scrollY}px`;
        }
        if (location === 'top') {
          tooltipHint.current.style.left = `${positionChildrenElement.left + 
            positionChildrenElement.width / 2 - 
            tooltipHint.current?.offsetWidth / 2}px`;
          tooltipHint.current.style.top = `${positionChildrenElement.top - 
            tooltipHint.current?.offsetHeight - 
            distBetweenElementAndTooltip + window.scrollY}px`;
        }
        if (location === 'bottom-left'){
          tooltipHint.current.style.left = `${positionChildrenElement.left + 
            positionChildrenElement.width/2 - 
            distBetweenSideAndArrowHorizontal}px`;
          tooltipHint.current.style.top = `${positionChildrenElement.bottom + 
            distBetweenElementAndTooltip + window.scrollY}px`;
        }
        if (location === 'bottom-right'){
          tooltipHint.current.style.left = `${positionChildrenElement.left + 
            positionChildrenElement.width/2 - 
            tooltipHint.current.offsetWidth + distBetweenSideAndArrowHorizontal}px`;
          tooltipHint.current.style.top = `${positionChildrenElement.bottom + 
            distBetweenElementAndTooltip + window.scrollY}px`;
        }
        if (location === 'bottom') {
          tooltipHint.current.style.left = `${positionChildrenElement.left + 
            positionChildrenElement.width / 2 - tooltipHint.current?.offsetWidth / 2}px`;
          tooltipHint.current.style.top = `${positionChildrenElement.bottom + 
            distBetweenElementAndTooltip + window.scrollY}px`;
        }
        if (location === 'right-top') {
          tooltipHint.current.style.left = `${positionChildrenElement.left + 
            positionChildrenElement.width + distBetweenElementAndTooltip}px`;
          tooltipHint.current.style.top = `${positionChildrenElement.top + 
            positionChildrenElement.height / 2 - 
            distBetweenSideAndArrowVertical + window.scrollY}px`;
        }
        if (location === 'right-bottom') {
          tooltipHint.current.style.left = `${positionChildrenElement.left + 
            positionChildrenElement.width + distBetweenElementAndTooltip}px`;
          tooltipHint.current.style.top = `${positionChildrenElement.top + 
            positionChildrenElement.height / 2 - 
            tooltipHint.current?.offsetHeight + 
            distBetweenSideAndArrowVertical + window.scrollY}px`;
        }
        if (location === 'right') {
          tooltipHint.current.style.left = `${positionChildrenElement.left + 
            positionChildrenElement.width + distBetweenElementAndTooltip}px`;
          tooltipHint.current.style.top = `${positionChildrenElement.top + 
            positionChildrenElement.height / 2 - 
            tooltipHint.current?.offsetHeight / 2 + window.scrollY}px`;
        }
      } else {
        if (location === 'top' || location === 'top-left' || location === 'top-right') {
          tooltipHint.current.style.left = `${positionChildrenElement.left + 
            positionChildrenElement.width / 2 - tooltipHint.current?.offsetWidth / 2}px`;
          tooltipHint.current.style.top = `${positionChildrenElement.top - 
            tooltipHint.current?.offsetHeight - 
            marginBetweenTooltipAndElement + window.scrollY}px`;
        } else if (location === 'bottom' || location === 'bottom-left' || location === 'bottom-right') {
          tooltipHint.current.style.left = `${positionChildrenElement.left + 
            positionChildrenElement.width / 2 - tooltipHint.current?.offsetWidth / 2}px`;
          tooltipHint.current.style.top = `${positionChildrenElement.bottom + 
            distBetweenElementAndTooltip - 
            marginBetweenTooltipAndElement + window.scrollY}px`;
        } else {
          tooltipHint.current.style.left = `${positionChildrenElement.left + 
            positionChildrenElement.width + marginBetweenTooltipAndElement}px`;
          tooltipHint.current.style.top = `${positionChildrenElement.top + 
            positionChildrenElement.height / 2 - 
            tooltipHint.current?.offsetHeight / 2 + window.scrollY}px`;
        }
      }
      if (transferTooltip) {
        if (location === 'top' || location === 'top-left' || location === 'top-right') {
          tooltipHint.current.style.top = `${positionChildrenElement.bottom + 
            distBetweenElementAndTooltip - 
            marginBetweenTooltipAndElement + window.scrollY}px`;
        }
        if (location === 'bottom' || location === 'bottom-left' || location === 'bottom-right') {
          tooltipHint.current.style.top = `${positionChildrenElement.top - 
            tooltipHint.current?.offsetHeight - 
            marginBetweenTooltipAndElement + window.scrollY}px`;
        }
      }
};