$margin: 10px;

.wrapper {
  position: relative;
  display: inline-block;
}

.tooltip {
  position: absolute;
  width: max-content;
  display: flex;
  flex-direction: row;
  justify-content: center;
  border-radius: 6px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  z-index: 1;

  &.top {
    top: 0;
    left: 50%;
    transform: translate(-50%, calc(-100% - $margin));
  }

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

  &.left {
    top: 50%;
    left: 0;
    transform: translate(calc(-100% - $margin), -50%);
  }

  &.right {
    top: 50%;
    right: 0;
    transform: translate(calc(100% + $margin), -50%);
  }
}
