.ui-tooltip {
  @apply font-sans;
  pointer-events: none;
  @apply flex
         flex-col
         w-[16.25rem]
         p-6
         items-start
         rounded-3xl
         bg-white
         shadow-[0px_0px_16px_0px_rgba(0,0,0,0.15)]
         gap-2;
}

.ui-tooltip--warning {
  @apply w-auto
         max-w-[12rem]
         p-3
         rounded-lg
         bg-red-50
         border
         border-isa-accent-red
         shadow-[0px_2px_8px_0px_rgba(223,0,27,0.15)];
}

.ui-tooltip--success {
  @apply w-auto
         max-w-[12rem]
         p-3
         rounded-lg
         bg-green-50
         border
         border-isa-accent-green
         shadow-[0px_2px_8px_0px_rgba(0,128,0,0.15)];
}

.ui-tooltip-title {
  @apply isa-text-body-2-bold text-isa-neutral-900;
}

.ui-tooltip-content {
  @apply isa-text-body-2-regular text-isa-neutral-600 whitespace-pre-line;
}

.ui-tooltip--warning .ui-tooltip-title {
  @apply text-isa-accent-red;
}

.ui-tooltip--warning .ui-tooltip-content {
  @apply text-isa-accent-red text-sm;
}

.ui-tooltip--success .ui-tooltip-title {
  @apply text-isa-accent-green;
}

.ui-tooltip--success .ui-tooltip-content {
  @apply text-isa-accent-green text-sm;
}

/*
  Global styles for tooltip overlay container
  These styles will be injected into the global stylesheet
*/
.ui-tooltip-panel {
  z-index: 1000; /* Ensure tooltip appears above most content */
  pointer-events: none; /* Allow clicks to pass through */
}

/* Keyframes for tooltip animations */
@keyframes tooltipFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes tooltipFadeOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

/* Animation for tooltip appearance */
.ui-tooltip {
  animation: tooltipFadeIn 0.15s ease-out;
}

.ui-tooltip--leaving {
  animation: tooltipFadeOut 0.15s ease-in forwards;
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .ui-tooltip {
    animation: none;
  }
  .ui-tooltip--leaving {
    animation: none;
  }
}

.ui-tooltip-icon {
  @apply inline-flex content-center text-isa-accent-blue translate-y-1;
}
