@layer components {
  .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: 28ch;
      opacity: 0;
      padding: 0.25ch 1ch;
      transition: var(--tooltip-duration) ease-out allow-discrete;
      transition-property: opacity, translate;
      translate: -50% -85%;
      text-overflow: ellipsis;
    }

    @media(any-hover: hover) {
      &:hover .for-screen-reader {
        block-size: auto !important;
        clip-path: none !important;
        inline-size: auto !important;
        opacity: 1;
        transition-delay: var(--tooltip-delay);
        translate: -50% -100%;
      }
    }
  }
}