personae/app/assets/css/tooltip.css

:where([data-pc-name~="tooltip"]) {
  @apply absolute max-w-50;

  &:where([data-p-position="right"]), &:where([data-p-position="left"]) {
    @apply px-1 py-0;
  }

  &:where([data-p-position="top"]), &:where([data-p-position="bottom"]) {
    @apply px-0 py-1;
  }

  & > :where([data-pc-section~="text"]) {
    @apply rounded-md bg-primary-700 px-3 py-2 break-normal whitespace-pre-line
    text-surface shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)];
  }

  & > :where([data-pc-section~="arrow"]) {
    @apply absolute h-0 w-0 border-4 border-solid border-transparent;
  }

  &:where([data-p-position="right"]) > &:where([data-pc-section~="arrow"]) {
    @apply -mt-1 border-l-0 border-r-surface-700;
  }

  &:where([data-p-position="left"]) > &:where([data-pc-section~="arrow"]) {
    @apply -mt-1 border-r-0 border-l-surface-700;
  }

  &:where([data-p-position="top"]) > &:where([data-pc-section~="arrow"]) {
    @apply -ml-1 border-b-0 border-y-surface-700;
  }

  &:where([data-p-position="bottom"]) > &:where([data-pc-section~="arrow"]) {
    @apply -ml-1 border-t-0 border-y-surface-700;
  }
}