.tooltip {
  background-color: transparent;
  border: none;
  overflow: visible;
}

.tooltip[popover] {
  position: absolute;
}

.tooltip--social {
  --social-icon-offset: -42%;

  transform: translate(calc(var(--social-icon-offset) + var(--social-icon-size) / 2), -0.5rem);
}

.tooltip--social-text {
  --social-icon-offset: -8%;
}

/* Relative positioning cannot be applied to the tooltip because it is
   positioned with anchoring so that is applied here */
.tooltip .tooltip-inside {
  display: block;

  padding: var(--space-sm) var(--space-md);
  position: relative;

  background-color: var(--color-white);
  border: none;
  border-radius: var(--radius-sm);
  filter: drop-shadow(0px 1px 10px rgba(0, 0, 0, 0.15));
}

.tooltip .tooltip-inside::after {
  --arrow-size: 18px;

  content: '';
  position: absolute;
  width: var(--arrow-size);
  height: var(--arrow-size);
  background-color: var(--color-white);
  color: var(--color-nearly-black);
  border-radius: 2px;
  z-index: -1;
  top: auto;
  bottom: calc(-1 * var(--arrow-size) / 2);
  left: 50%;
  transform: translate(-50%) rotate(45deg);
}