@layer lotek {
  lt-popover {
    display: contents;
  }

  .lt-popover {
    /* The panel is in the top layer, so the position is relative to the
       viewport. The values are set by the component, which works them out
       against the button. */
    position: fixed;
    inset: auto;
    inset-block-start: var(--lt-popover-top, 0);
    inset-inline-start: var(--lt-popover-left, 0);
    margin: 0;
    /* The panel is often a `<ul>` of actions. The reset belongs here and
       not with the consumer: `data-variant="plain"` matched no rule on
       `.lt-popover`, so the list kept the browser's bullets. The indent was
       already gone, since `padding` is set in the same rule. */
    list-style: none;
    box-sizing: border-box;
    inline-size: max-content;
    max-inline-size: var(
      --lt-popover-width,
      min(20rem, calc(100vw - var(--lt-spacing-8)))
    );
    padding: var(--lt-popover-padding, var(--lt-spacing-3));
    font-family: inherit;
    font-size: var(--lt-font-size-m);
    line-height: var(--lt-line-height-default);
    color: var(--lt-color-neutral-text-strong);
    background: var(--lt-color-neutral-canvas);
    border: 1px solid var(--lt-color-neutral-border-subtle);
    border-radius: var(--lt-popover-radius, var(--lt-spacing-1));
    box-shadow: var(--lt-shadow-overlay);
  }

  /* The position is physical: `--lt-popover-left` is the distance from the
     left edge of the viewport, worked out against the button.
     `inset-inline-start` is the right edge in a right-to-left document, so
     there it is flipped, the way background icons are flipped with
     `:dir(rtl)`. */
  .lt-popover:dir(rtl) {
    inset-inline-start: auto;
    inset-inline-end: var(--lt-popover-left, 0);
  }

  .lt-popover:not(:popover-open) {
    display: none;
  }
}