@layer components {
  [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;
      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%;
      }
    }

    @media(any-hover: hover) {
      &:hover .for-screen-reader {
        block-size: auto !important;
        clip-path: none !important;
        inline-size: auto !important;
        opacity: 1;
        transform: translate3d(0, 0, 0); /* Fixes Safari overflow rendering bug */
        transition-delay: var(--tooltip-delay);
        translate: -50% -100%;
        z-index: var(--z-tooltip);

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