.tooltips {
  visibility: hidden;
  position: fixed;
  background-color: var(--neutral-900);
  color: var(--text-on-action);
  font-size: var(--rem-13);
  line-height: var(--rem-18);
  letter-spacing: 0;
  text-align: center;
  max-width: 276px;
  padding: .5rem .75rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-neutral-md);
  z-index: 9999;

  &[data-visible="true"] {
    visibility: visible;
  }

  &::after {
    content: '';
    width: 1rem;
    height: 1rem;
    aspect-ratio: 1;
    position: absolute;
    background-color: var(--neutral-900);
    z-index: -1;
  }

  &[data-side="top"]::after {
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    border-radius: var(--radius-xxs);
  }

  &[data-side="bottom"]::after {
    top: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    border-radius: var(--radius-xxs);
  }

  &[data-side="left"]::after {
    top: 50%;
    right: -6px;
    transform: translateY(-50%) rotate(45deg);
    border-radius: var(--radius-xxs);
  }

  &[data-side="right"]::after {
    top: 50%;
    left: -6px;
    transform: translateY(-50%) rotate(45deg);
    border-radius: var(--radius-xxs);
  }
}