.root {
  position: relative;
  color: inherit;
  line-height: inherit;
}

.root:focus,
.root:active,
.root:hover {
  outline: none;
}

.tooltip {
  z-index: var(--layer-high);
  padding: var(--space-xxxsmall) var(--space-xxsmall);
  border-radius: var(--radius-small);
  background: var(--color-text);
  max-width: 28em;
  color: var(--color-background);
  font-size: var(--size-small);
  text-align: center;
  filter: drop-shadow(var(--shadow-layer));
  will-change: filter;
}

.arrow svg {
  display: block;
  fill: var(--color-text);
}