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

    :is(.for-screen-reader, .tooltip-content) {
      background: var(--color-ink);
      border-radius: 0.5ch;
      block-size: 1px;
      clip-path: inset(50%);
      color: var(--color-canvas);
      font-size: var(--text-x-small);
      font-weight: normal;
      inline-size: 1px;
      inset: -1ch auto auto 50%;
      max-inline-size: min(50ch, calc(100vw - (var(--inline-space) * 2)));
      opacity: 0;
      line-height: 1.4;
      overflow: hidden;
      padding: 0.25ch 1ch;
      pointer-events: none;
      position: absolute;
      text-wrap: balance;
      transition: var(--tooltip-duration) ease-out allow-discrete;
      transition-property: opacity;
      translate: -50% -100%;
      white-space: normal;

      &.orient-right {
        inset-inline: 0 auto;
        translate: var(--orient-offset, 0px) -100%;
      }

      &.orient-left {
        inset-inline: auto 0;
        translate: var(--orient-offset, 0px) -100%;
      }

      &.orient-bottom {
        inset: calc(100% + 1ch) auto auto 50%;
        translate: -50% 0;
      }

      &.orient-bottom.orient-right {
        inset-inline: 0 auto;
        translate: var(--orient-offset, 0px) 0;
      }

      &.orient-bottom.orient-left {
        inset-inline: auto 0;
        translate: var(--orient-offset, 0px) 0;
      }
    }

    &.tooltip--below :is(.for-screen-reader, .tooltip-content) {
      inset: calc(100% + 1ch) auto auto 50%;
      translate: -50% 0;

      &.orient-right {
        inset-inline: 0 auto;
        translate: var(--orient-offset, 0px) 0;
      }

      &.orient-left {
        inset-inline: auto 0;
        translate: var(--orient-offset, 0px) 0;
      }
    }

    @media(any-hover: hover) {
      &:hover .tooltip-content,
      &:not(:has(.tooltip-content)):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%;
        }

        &.orient-bottom {
          translate: -50% 0;
        }

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

      &.tooltip--below:hover .tooltip-content,
      &:not(:has(.tooltip-content)).tooltip--below:hover .for-screen-reader {
        translate: -50% 0;

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