@layer components {
  .ui-tooltip-trigger {
    position: relative;
  }

  .ui-tooltip:not(.ui-tooltip--svg) {
    position: absolute;
    z-index: 10;
    box-sizing: border-box;
    inline-size: max-content;
    max-inline-size: min(18rem, calc(100vw - (var(--ui-space-4) * 2)));
    padding: var(--ui-space-1) var(--ui-space-2);
    border: var(--ui-border-width) solid var(--ui-color-text);
    border-radius: var(--ui-radius-control);
    background: var(--ui-color-text);
    color: var(--ui-color-surface);
    font-size: var(--ui-font-size-sm);
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    white-space: normal;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
  }

  .ui-tooltip-trigger:is(:hover, :focus-visible) > .ui-tooltip:not(.ui-tooltip--svg),
  .ui-tooltip-trigger:is(:hover, :focus-visible) .ui-tooltip--svg {
    opacity: 1;
    visibility: visible;
  }

  .ui-tooltip--svg {
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
  }

  .ui-tooltip--svg .ui-tooltip__surface {
    fill: var(--ui-color-text);
  }

  .ui-tooltip--svg text {
    fill: var(--ui-color-surface);
    font-size: 3.2px;
    font-weight: 700;
  }
}