@layer components {
  [data-hint][role='button'] {
    cursor: help;
  }

  [data-hint-anchor] {
    anchor-name: --content-hint;
  }

  .content-hint {
    position: fixed;
    position-anchor: --content-hint;
    position-area: block-end;
    position-try-fallbacks: flip-block, flip-inline;
    inset: auto;
    inline-size: max-content;
    max-inline-size: min(40ch, calc(100vw - var(--space-24)));
    max-block-size: calc(100vh - var(--space-24));
    margin: 0;
    padding: var(--space-8) var(--space-12);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-control);
    background: var(--color-paper);
    color: var(--color-ink);
    box-shadow: var(--shadow-raised);
    font: var(--text-small) / var(--leading-small) var(--font-text);
    overflow-wrap: anywhere;
    white-space: normal;
  }
}