.tooltip,
.tooltip-top {
  z-index: 10;
  position: absolute;
  left: 0;
  right: 0;
  font-family: var(
    --font-family,
    'Roboto',
    'Segoe UI',
    BlinkMacSystemFont,
    system-ui,
    -apple-system
  );
  font-size: 10px;
  font-weight: 400;
  font-size: calc(var(--font-size, 18px) + 2px);
  white-space: nowrap;
  text-transform: none;
  text-align: center;
  pointer-events: none;
}

.tooltip {
  bottom: -40px;
}

.tooltip-top {
  top: -40px;
}

.tooltip > span,
.tooltip-top > span {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  right: 0;
  display: inline-block;
  box-sizing: content-box;
  margin: 0 -100vw;
  border: solid 8px transparent;
  border-radius: 12px;
  padding: 4px 8px;
  color: rgb(var(--surface-rgb, 255, 255, 255));
  background-clip: padding-box;
  background-image: linear-gradient(
    rgba(var(--surface-rgb, 255, 255, 255), 0.34),
    rgba(var(--surface-rgb, 255, 255, 255), 0.34)
  );
  background-color: rgba(var(--onsurface-rgb, 0, 0, 0), 0.85);
  transform: scale(0);
  opacity: 0;
  pointer-events: auto;
  transition: transform 0.075s, opacity 0.075s;
}

:not(html):hover > .tooltip > span,
.tooltip:hover > span,
:not(html):hover > .tooltip-top > span,
.tooltip-top:hover > span {
  transform: scale(1);
  opacity: 1;
  transition: transform 0.15s, opacity 0.15s;
}

:focus-within > .tooltip > span,
:focus-within > .tooltip-top > span {
  transform: scale(1);
  opacity: 1;
  transition: transform 0.15s, opacity 0.15s;
}

/* Non-desktop */
@media (pointer: coarse), (hover: none) {
  .tooltip,
  .tooltip-top {
    font-size: 14px;
    line-height: 20px;
  }

  .tooltip {
    bottom: -48px;
  }
  .tooltip-top {
    top: -48px;
  }

  .tooltip > span,
  .tooltip-top > span {
    padding: 6px 16px;
  }
}