@layer lotek {
  .lt-tooltip {
    position: relative;
    display: inline-flex;
  }

  .lt-tooltip__bubble {
    /* The width in `--lt-tooltip-width` is the whole bubble, also on a page
       without a CSS reset that sets border-box. */
    box-sizing: border-box;
    position: absolute;
    inset-block-end: calc(100% + var(--lt-spacing-2));
    inset-inline-start: 50%;
    transform: translateX(-50%);
    z-index: 40;
    inline-size: max-content;
    max-inline-size: var(--lt-tooltip-width, 16rem);
    padding: var(--lt-tooltip-padding, var(--lt-spacing-1) var(--lt-spacing-2));
    font-size: var(--lt-font-size-s);
    line-height: var(--lt-line-height-compact);
    color: var(--lt-color-neutral-canvas);
    background: var(--lt-color-neutral-text-strong);
    border-radius: var(--lt-tooltip-radius, var(--lt-spacing-1));
    /* The bubble is hidden until the trigger gets focus or the mouse.
       `display: none` and not just `visibility`: a hidden bubble still took
       up room, and at the right edge it caused sideways scrolling on a
       narrow screen. `aria-describedby` reads the text it points to also
       while the bubble is hidden. */
    display: none;
    opacity: 0;
    /* While it fades out, the bubble briefly has `display` on. Without this
       it and the bridge took clicks meant for what was underneath. */
    pointer-events: none;
  }

  /* `inset-inline-start` flips with the direction, `translateX` does not.
     Without this the bubble sat a whole bubble width to the left of the
     button. */
  .lt-tooltip__bubble:dir(rtl) {
    transform: translateX(50%);
  }

  .lt-tooltip:hover .lt-tooltip__bubble,
  .lt-tooltip:focus-within .lt-tooltip__bubble {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }

  /* An invisible bridge over the gap between the button and the bubble, as
     wide as the button. Without it `:hover` let go on the way up, and the
     bubble disappeared before the mouse reached it. It is only there while
     the bubble shows, and no wider than the button, so it does not take
     clicks from the content next to it. */
  .lt-tooltip:is(:hover, :focus-within)::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: 100%;
    block-size: var(--lt-spacing-2);
  }

  /* The fade-in starts from invisible also when the bubble comes from
     `display: none`. Without support for this it just appears without
     fading. */
  @starting-style {
    .lt-tooltip:hover .lt-tooltip__bubble,
    .lt-tooltip:focus-within .lt-tooltip__bubble {
      opacity: 0;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .lt-tooltip__bubble {
      transition:
        opacity 120ms ease,
        display 120ms allow-discrete;
    }
  }

  /* High contrast: the bubble has no border, and the surfaces are forced to
     the same colour as the page. Without an edge the text floats right on
     top of the content below. */
  @media (forced-colors: active) {
    .lt-tooltip__bubble {
      border: 1px solid CanvasText;
    }
  }
}