/* Tooltip container */
[data-tooltip] {
  position: relative;
  cursor: pointer;
}

/* Tooltip text (::before) */
/* Shared Styles */
.tooltip-base,
[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  background-color: var(--bg-tooltip);
  color: var(--text-primary);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
  z-index: var(--z-tooltip, 1070);
  pointer-events: none;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.tooltip-arrow,
[data-tooltip]::after {
  content: "";
  position: absolute;
  border-style: solid;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
  z-index: var(--z-tooltip, 1070);
  pointer-events: none;
}

/* Show tooltip on hover */
.tooltip-visible,
[data-tooltip]:hover::before,
[data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
}

/* For JS Tooltips appended to body (fixed position) */
.js-tooltip {
  position: fixed !important; /* Override absolute */
  z-index: var(--z-tooltip, 1070);
  pointer-events: none;
  animation: tooltipFadeIn 0.2s ease forwards;
}

@keyframes tooltipFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* -------------------------------------------------------------------------- */
/* Positions */
/* -------------------------------------------------------------------------- */

/* TOP (Default) */
[data-tooltip]:not([data-tooltip-pos])::before,
[data-tooltip-pos="top"]::before {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  margin-bottom: 8px;
}

[data-tooltip]:not([data-tooltip-pos])::after,
[data-tooltip-pos="top"]::after {
  border-width: 8px 6px 0 6px;
  border-color: var(--bg-primary) transparent transparent transparent;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  margin-bottom: 0px; /* Aligns with the bottom of the tooltip bubbles margin */
}

/* Hover effects for Top */
[data-tooltip]:not([data-tooltip-pos]):hover::before,
[data-tooltip-pos="top"]:hover::before {
  transform: translateX(-50%) translateY(-8px);
}
[data-tooltip]:not([data-tooltip-pos]):hover::after,
[data-tooltip-pos="top"]:hover::after {
  transform: translateX(-50%) translateY(0);
}

/* RIGHT */
[data-tooltip-pos="right"]::before {
  top: 50%;
  left: 100%;
  transform: translateY(-50%) translateX(8px);
  margin-left: 8px;
}

[data-tooltip-pos="right"]::after {
  border-width: 6px 8px 6px 0;
  border-color: transparent var(--bg-primary) transparent transparent;
  top: 50%;
  left: 100%;
  transform: translateY(-50%) translateX(0);
}

/* BOTTOM */
[data-tooltip-pos="bottom"]::before {
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  margin-top: 8px;
}

[data-tooltip-pos="bottom"]::after {
  border-width: 0 6px 8px 6px;
  border-color: transparent transparent var(--bg-primary) transparent;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(0);
}

/* LEFT */
[data-tooltip-pos="left"]::before {
  top: 50%;
  right: 100%;
  transform: translateY(-50%) translateX(-8px);
  margin-right: 8px;
}

[data-tooltip-pos="left"]::after {
  border-width: 6px 0 6px 8px;
  border-color: transparent transparent transparent var(--bg-primary);
  top: 50%;
  right: 100%;
  transform: translateY(-50%) translateX(0);
}