@use "../../wc";


:host {
  display: contents;
}

.tooltip {
  --arrow-size: 6px;
}

.tooltip[placement^='top']::part(popup) {
  transform-origin: bottom;
}

.tooltip[placement^='bottom']::part(popup) {
  transform-origin: top;
}

.tooltip[placement^='left']::part(popup) {
  transform-origin: right;
}

.tooltip[placement^='right']::part(popup) {
  transform-origin: left;
}

.tooltip__body {
  @include wc.text-style(paragraph);

  display: block;
  width: max-content;
  max-width: max-content;
  border-radius: var(--zn-border-radius);
  background-color: var(--arrow-color);
  text-align: start;
  white-space: normal;
  // The bubble is painted in --arrow-color, which resolves to --zn-color-text,
  // so the ink has to be the surface colour rather than a fixed white — on any
  // dark theme the text colour is light and white-on-light is unreadable.
  color: rgb(var(--zn-color-base, 255, 255, 255));
  padding: var(--zn-spacing-x-small) var(--zn-spacing-small);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}