
.wrapper {
  @include flex-align(center, center);

  display: inline-flex;
  gap: 0.8rem;
  position: relative;
}

.tooltip {
  position: absolute;
  border-radius: 4px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 4px;
  color: var(--tooltip-text-color, var(--color-4));
  background: var(--tooltip-background-color, #6e33e5);
  font-size: 1rem;
  z-index: 100;
  white-space: wrap;
  max-width: 20rem;
  display: none;

  &.active{
    display: block !important;
  }

  &::before {
    content: " ";
    left: 50%;
    border: solid transparent;
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-width: var(--tooltip-arrow-size, 6px);
    margin-left: calc(var(--tooltip-arrow-size, 6px) * -1);
  }
}

.top {
  bottom: 100%;
   
  &::before {
    top: 100%;
    border-top-color: var(--tooltip-background-color, #6e33e5);
  }
}

.right {
  left: calc(100% + var(--tooltip-margin, 4px));
  top: 50%;
  transform: translateX(0) translateY(-50%);

  &::before {
    left: calc(var(--tooltip-arrow-size, 6px) * -1);
    top: 50%;
    transform: translateX(0) translateY(-50%);
    border-right-color: var(--tooltip-background-color, #6e33e5);
  }
}

.bottom {
  top: 100%;

  &::before {
    bottom: 100%;
    border-bottom-color: var(--tooltip-background-color, #6e33e5);
  }
}

.left {
  left: auto;
  right: calc(100% + var(--tooltip-margin, 4px));
  top: 50%;
  transform: translateX(0) translateY(-50%);

  &::before {
    left: auto;
    right: calc(var(--tooltip-arrow-size, 6px) * -2);
    top: 50%;
    transform: translateX(0) translateY(-50%);
    border-left-color: var(--tooltip-background-color, #6e33e5);
  }
}

.staticLeft {
  > div {
    left: auto;
    right: 0;
    transform: translateX(0);

    &::before {
      left: auto;
      right: 0;
      transform: translateX(-10px);
    }
  }
}

.staticRight {
  > div {
    left: 0;
    right: auto;
    transform: translateX(0);

    &::before {
      left: 0;
      right: auto;
      transform: translateX(11px);
    }
  }
}