@layer components {
    [data-controller~="tooltip"] {
      --tooltip-delay: 750ms;
      --tooltip-duration: 150ms;
      position: relative;
  
      .for-screen-reader {
        background: var(--text);
        border-radius: 0.5ch;
        color: var(--bg);
        font-size: 0.8rem;
        font-weight: normal;
        inset: -1ch auto auto 50%;
        max-inline-size: min(50ch, calc(100vw - 2rem));
        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: var(--orient-offset, 0px) -100%;
        }
  
        &.orient-left {
          inset-inline: auto 0;
          translate: var(--orient-offset, 0px) -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);
          transition-delay: var(--tooltip-delay);
          translate: -50% -100%;
          z-index: 40;
  
          &.orient-left,
          &.orient-right {
            translate: 0 -100%;
          }
        }
      }
    }
  
    .autoresize__textarea {
      @supports (field-sizing: content) {
        field-sizing: content;
      }
    }
  
    @supports not (field-sizing: content) {
      .autoresize__wrapper {
        display: grid !important;
        position: relative;
  
        > *,
        &::after {
          grid-area: 1 / 1 / 2 / 2;
        }
  
        &::after {
          content: attr(data-autoresize-clone-value) " ";
          font: inherit;
          line-height: inherit;
          visibility: hidden;
          white-space: pre-wrap;
        }
      }
  
      .autoresize__textarea {
        inset: 0;
        overflow: hidden;
        position: absolute;
        resize: none;
      }
    }
  }