@layer components {
  .rs-tooltip {
    display: inline-block;
    border-radius: var(--rs-radius-small);
    padding: var(--rs-unit-x1) var(--rs-unit-x2);
    background: var(--rs-color-background-elevation-overlay);
    color: var(--rs-color-foreground-neutral);
    box-shadow: var(--rs-shadow-overlay);
    font-size: var(--rs-font-size-caption-1);
    line-height: var(--rs-line-height-caption-1);
  }

  .rs-tooltip-anchor {
    position: relative;
    display: inline-flex;
  }

  .rs-tooltip-anchor > .rs-tooltip {
    position: absolute;
    inset-block-end: calc(100% + var(--rs-unit-x2));
    inset-inline-start: 50%;
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    transform: translateX(-50%) translateY(var(--rs-unit-x1));
    transition:
      opacity var(--rs-duration-fast) var(--rs-easing-standard),
      transform var(--rs-duration-fast) var(--rs-easing-standard);
  }

  .rs-tooltip-anchor:is(:hover, :focus-within) > .rs-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}