@utility ui-tooltip {
  :where(&) {
    @apply flex gap-1;

    anchor-scope: --trigger;

    & .ui-tooltip-toggle {
      position: relative;
      anchor-name: --trigger;
    }
  }
}

@utility ui-tooltip-content {
  :where(&) {
    position: fixed;
    position-anchor: --trigger;
    position-area: bottom center;

    position-try-fallbacks: flip-block;

    /*background-color: var(--muted);*/
    color: var(--foreground);
    text-align: center;
    padding: 5px 2px;
    border-radius: 6px;
  }
}