.ga-tooltip {
  @apply text-md relative max-w-100 rounded bg-(--ga-color-surface-action-hover) p-2 text-(--ga-color-text-on-action);

  &.ga-tooltip--top-start,
  &.ga-tooltip--top-center,
  &.ga-tooltip--top-end,
  &.ga-tooltip--bottom-start,
  &.ga-tooltip--bottom-center,
  &.ga-tooltip--bottom-end,
  &.ga-tooltip--left-start,
  &.ga-tooltip--left-center,
  &.ga-tooltip--left-end,
  &.ga-tooltip--right-start,
  &.ga-tooltip--right-center,
  &.ga-tooltip--right-end {
    @apply before:absolute before:content-[''];
  }

  &.ga-tooltip--top-start,
  &.ga-tooltip--top-center,
  &.ga-tooltip--top-end {
    @apply mb-2;
  }

  &.ga-tooltip--bottom-start,
  &.ga-tooltip--bottom-center,
  &.ga-tooltip--bottom-end {
    @apply mt-2;
  }

  &.ga-tooltip--left-start,
  &.ga-tooltip--left-center,
  &.ga-tooltip--left-end {
    @apply mr-2;
  }

  &.ga-tooltip--right-start,
  &.ga-tooltip--right-center,
  &.ga-tooltip--right-end {
    @apply ml-2;
  }

  &.ga-tooltip--top-start::before,
  &.ga-tooltip--top-center::before,
  &.ga-tooltip--top-end::before {
    @apply -bottom-2 border-x-8 border-t-8 border-x-transparent border-t-(--ga-color-surface-action-hover);
  }
  &.ga-tooltip--bottom-start::before,
  &.ga-tooltip--bottom-center::before,
  &.ga-tooltip--bottom-end::before {
    @apply -top-2 border-x-8 border-b-8 border-x-transparent border-b-(--ga-color-surface-action-hover);
  }
  &.ga-tooltip--top-start::before,
  &.ga-tooltip--bottom-start::before {
    @apply left-4;
  }
  &.ga-tooltip--top-center::before,
  &.ga-tooltip--bottom-center::before {
    @apply left-1/2 -translate-x-1/2;
  }
  &.ga-tooltip--top-end::before,
  &.ga-tooltip--bottom-end::before {
    @apply right-4;
  }

  &.ga-tooltip--left-start::before,
  &.ga-tooltip--left-center::before,
  &.ga-tooltip--left-end::before {
    @apply -right-2 border-y-8 border-l-8 border-y-transparent border-l-(--ga-color-surface-action-hover);
  }
  &.ga-tooltip--right-start::before,
  &.ga-tooltip--right-center::before,
  &.ga-tooltip--right-end::before {
    @apply -left-2 border-y-8 border-r-8 border-y-transparent border-r-(--ga-color-surface-action-hover);
  }
  &.ga-tooltip--left-start::before,
  &.ga-tooltip--right-start::before {
    @apply top-4;
  }
  &.ga-tooltip--left-center::before,
  &.ga-tooltip--right-center::before {
    @apply top-1/2 -translate-y-1/2;
  }
  &.ga-tooltip--left-end::before,
  &.ga-tooltip--right-end::before {
    @apply bottom-4;
  }

  .ga-tooltip__title {
    @apply mb-1 font-semibold;
  }
}