.tooltip {
  display: flex;
  position: relative;
}
.tooltip .tooltip-content-wrapper {
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
  z-index: 1;
}
.tooltip .tooltip-content-wrapper.top {
  bottom: calc(100% + 16px);
}
.tooltip .tooltip-content-wrapper.bottom {
  top: calc(100% + 16px);
}
.tooltip .tooltip-content-wrapper .tooltip-content {
  flex-direction: row;
  text-align: left;
  gap: 8px;
  cursor: default;
  background: #000000;
  border-radius: 12px;
  border: 1px solid #262626;
  padding: 8px;
}
.tooltip .tooltip-content-wrapper .tooltip-content:after {
  width: 8px;
  height: 8px;
  border: 1px solid #262626;
  background-color: #000000;
  position: absolute;
  content: "";
  left: 50%;
  transform-origin: center;
  transform: translateX(calc(50% - 8px)) rotateZ(-45deg);
}
.tooltip .tooltip-content-wrapper .tooltip-content.top:after {
  bottom: -4px;
  border-top: none;
  border-right: none;
}
.tooltip .tooltip-content-wrapper .tooltip-content.bottom:after {
  top: -4px;
  border-bottom: none;
  border-left: none;
}