.tooltip-wrapper {
  display: inline-block;
}

.tooltip {
  z-index: 9999;
  display: none;
}

.tooltip.short {
  border-radius: var(--radius-sm);
  gap: var(--spacing-md);
  padding: var(--spacing-2) var(--spacing-4);
  background: var(--gray-900);
  font-size: var(--font-size-xs);
  color: var(--gray-25);
  font-weight: var(--font-weight-semibold);
}

.tooltip.long {
  flex-direction: var(--flex-direction-col);
  border-radius: var(--radius-md);
  gap: var(--spacing-lg);
  padding: var(--spacing-5);
  background: var(--gray-25);
  border: var(--border-width-thin) var(--border-style-solid) var(--gray-400);
  font-size: var(--font-size-sm);
  color: var(--gray-950);
  font-weight: var(--font-weight-normal);
}

.tooltip .tooltip-text {
  max-width: 220px;
  white-space: normal;
}

.tooltip-extra-label {
  display: inline-flex;
  white-space: nowrap;
  align-items: center;
}

.tooltip-button {
  height: 32px;
}

.tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
}

/* Arrow Direction Styles (based on [data-placement] attribute) */

/* Bottom */
.tooltip[data-placement^="bottom"] .tooltip-arrow {
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}
.tooltip.short[data-placement^="bottom"] .tooltip-arrow {
  border-bottom: 4px solid var(--gray-950);
}
.tooltip.long[data-placement^="bottom"] .tooltip-arrow {
  border-bottom: 4px solid var(--gray-400);
  top: -5px;
}

/* Top */
.tooltip[data-placement^="top"] .tooltip-arrow {
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}
.tooltip.short[data-placement^="top"] .tooltip-arrow {
  border-top: 4px solid var(--gray-950);
}
.tooltip.long[data-placement^="top"] .tooltip-arrow {
  border-top: 4px solid var(--gray-400);
  bottom: -5px;
}

/* Right */
.tooltip[data-placement^="right"] .tooltip-arrow {
  left: -4px;
  top: 50%;
  transform: translateY(-50%);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
.tooltip.short[data-placement^="right"] .tooltip-arrow {
  border-right: 4px solid var(--gray-950);
}
.tooltip.long[data-placement^="right"] .tooltip-arrow {
  border-right: 4px solid var(--gray-400);
  left: -5px;
}

/* Left */
.tooltip[data-placement^="left"] .tooltip-arrow {
  right: -4px;
  top: 50%;
  transform: translateY(-50%);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
.tooltip.short[data-placement^="left"] .tooltip-arrow {
  border-left: 4px solid var(--gray-950);
}
.tooltip.long[data-placement^="left"] .tooltip-arrow {
  border-left: 4px solid var(--gray-400);
  right: -5px;
}