.tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  font-family: var(--font-family-base);
  --tt-corner: -2px;
}
.tooltip--large { --tt-corner: -12px; }

.tooltip .popover { --popover-arrow-stroke: var(--color-alpha-dark-12); }
.tooltip .popover--short { --popover-border: var(--color-alpha-dark-12); }

.tooltip__trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--color-gray-200);
  cursor: pointer;
}
.tooltip__trigger svg { display: block; width: 16px; height: 16px; }

.tooltip .popover {
  position: absolute;
  width: max-content;
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.12s ease;
}
.tooltip:hover .popover,
.tooltip:focus-within .popover,
.tooltip.tooltip--open .popover {
  opacity: 1;
  visibility: visible;
}

.tooltip--top-left .popover,
.tooltip--top-center .popover,
.tooltip--top-right .popover { bottom: 20px; }

.tooltip--bottom-left .popover,
.tooltip--bottom-center .popover,
.tooltip--bottom-right .popover { top: 20px; }

.tooltip--top-center .popover,
.tooltip--bottom-center .popover { left: 50%; transform: translateX(-50%); }

.tooltip--top-left .popover,
.tooltip--bottom-left .popover { right: var(--tt-corner); }
.tooltip--top-right .popover,
.tooltip--bottom-right .popover { left: var(--tt-corner); }

.tooltip--left .popover  { right: 20px; top: 50%; transform: translateY(-50%); }
.tooltip--right .popover { left: 20px;  top: 50%; transform: translateY(-50%); }