@use '../tokens' as t;

.wrap {
  position: relative;
  display: inline-flex;
}

.bubble {
  @include t.transition(opacity, translate);
  position: absolute;
  z-index: t.z(tooltip);
  // Centred over the trigger in either direction: auto margins inside an inset band far wider than
  // any bubble. A 50% logical inset with a -50% physical translate lands a whole width off-centre
  // under `dir="rtl"` (`rtl-sheets.test.ts`).
  inset-inline: -100vw;
  margin-inline: auto;
  inline-size: max-content;
  translate: 0 t.space(1);
  max-inline-size: 18rem;
  padding-block: t.space(1);
  padding-inline: t.space(2);
  border-radius: t.radius(sm);
  background: t.role('fg-strong');
  color: t.role('bg');
  font-size: t.text(xs);
  line-height: t.leading(snug);
  text-align: center;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
}

.placement-block-start {
  inset-block-end: calc(100% + #{t.space(1)});
}

.placement-block-end {
  inset-block-start: calc(100% + #{t.space(1)});
}

// Hover and keyboard focus both reveal it — a hover-only tooltip is inaccessible.
.wrap:hover .bubble,
.wrap:focus-within .bubble {
  translate: 0 0;
  opacity: 1;
}