prenix_components

@layer components {
  .tooltip-toggle {
    @apply h-fit w-fit inline-block;
  }

  .tooltip {
    @apply inline-flex flex-col items-center justify-center relative;
  }

  .tooltip--default {
    --tooltip: hsl(var(--content));
    --tooltip-foreground: hsl(var(--content-foreground));
  }

  .tooltip--primary {
    --tooltip: hsl(var(--primary));
    --tooltip-foreground: hsl(var(--primary-foreground));
  }

  .tooltip--secondary {
    --tooltip: hsl(var(--secondary));
    --tooltip-foreground: hsl(var(--secondary-foreground));
  }

  .tooltip--success {
    --tooltip: hsl(var(--success));
    --tooltip-foreground: hsl(var(--success-foreground));
  }

  .tooltip--warning {
    --tooltip: hsl(var(--warning));
    --tooltip-foreground: hsl(var(--warning-foreground));
  }

  .tooltip--danger {
    --tooltip: hsl(var(--danger));
    --tooltip-foreground: hsl(var(--danger-foreground));
  }

  .tooltip-inner {
    @apply px-2.5 py-1 text-sm rounded-xl box-border relative z-[1080] shadow-medium;
    @apply text-[--tooltip-foreground] bg-[--tooltip] subpixel-antialiased;
  }

  .tooltip-arrow.tooltip:before {
    border-radius: 2px;
    box-shadow: var(--shadow-md);
    @apply h-[10px] w-[10px] -z-[1] absolute content-[""] rotate-45 bg-[--tooltip];
  }

  .tooltip-arrow.tooltip[data-popper-placement='top']:before {
    bottom: -3.5px;
  }

  .tooltip-arrow.tooltip[data-popper-placement='bottom']:before {
    top: -3.5px;
  }

  .tooltip-arrow.tooltip[data-popper-placement='left']:before {
    right: -3px;
  }

  .tooltip-arrow.tooltip[data-popper-placement='right']:before {
    left: -3px;
  }
}