@layer components {
  /* An element with data-controller="tooltip" shows its own .for-screen-reader
   * text above it on hover, on keyboard focus and on a tap. The host anchors
   * the text unless its own block already positions it. */
  :where([data-controller~="tooltip"]) {
    position: relative;
  }

  [data-controller~="tooltip"] {
    --tooltip-delay: 750ms;
    --tooltip-duration: 150ms;

    .for-screen-reader {
      background: var(--color-ink);
      border-radius: 0.5ch;
      color: var(--color-canvas);
      font-size: var(--text-x-small);
      font-weight: normal;
      inset: -1ch auto auto 50%;
      max-inline-size: min(50ch, calc(100vw - (var(--inline-space) * 2)));
      opacity: 0;
      padding: 0.25ch 1ch;
      pointer-events: none;
      transition: var(--tooltip-duration) ease-out allow-discrete;
      transition-property: opacity;
      translate: -50% -100%;
      text-overflow: ellipsis;

      &.orient-right {
        inset-inline: 0 auto;
        translate: 0 -100%;
      }

      &.orient-left {
        inset-inline: auto 0;
        translate: 0 -100%;
      }
    }

    &:is(:hover, :focus-visible, :has(:focus-visible)) .for-screen-reader {
      block-size: auto !important;
      clip-path: none !important;
      inline-size: max-content !important;
      opacity: 1;
      transform: translate3d(0, 0, 0); /* Fixes Safari overflow rendering bug */
      transition-delay: var(--tooltip-delay);
      translate: -50% -100%;
      white-space: normal;
      z-index: var(--z-tooltip);

      &.orient-left,
      &.orient-right {
        translate: 0 -100%;
      }
    }
  }

  /* The "Copiado!" note a copy button (ClipboardHelper) flashes above itself. */
  .copied-note {
    background: var(--color-ink);
    border-radius: 0.5ch;
    color: var(--color-canvas);
    display: none;
    font-size: var(--text-x-small);
    font-weight: normal;
    inset: -1ch auto auto 50%;
    padding: 0.25ch 1ch;
    pointer-events: none;
    position: absolute;
    translate: -50% -100%;
    white-space: nowrap;
    z-index: var(--z-tooltip);

    .btn--success > & {
      animation: appear-then-fade 1.5s both;
      display: block;
    }
  }
}