* {
  @apply subpixel-antialiased;
}

html,
body {
  @apply h-full;
}

body {
  @apply font-open-sans
    bg-white
    text-neutral-950
    motion-safe:scroll-smooth
    dark:bg-neutral-950
    dark:text-white;
}

[data-tooltip] {
  @apply relative;

  &::after {
    @apply pointer-events-none
      absolute
      top-full
      left-1/2
      z-10
      mt-2
      w-max
      max-w-64
      -translate-x-1/2
      rounded-md
      border
      border-neutral-200
      bg-white
      px-2.5
      py-1.5
      text-sm
      font-medium
      text-neutral-900
      opacity-0
      shadow-lg
      transition-opacity
      content-[attr(data-tooltip)];
  }

  &::before {
    @apply pointer-events-none
      absolute
      top-full
      left-1/2
      z-10
      mt-1
      size-2
      -translate-x-1/2
      rotate-45
      border
      border-r-0
      border-b-0
      border-neutral-200
      bg-white
      opacity-0
      transition-opacity
      content-[''];
  }

  &:hover::after,
  &:hover::before,
  &:focus-visible::after,
  &:focus-visible::before {
    @apply opacity-100;
  }
}

[data-theme='dark'] [data-tooltip] {
  &::after {
    @apply border-neutral-900
      bg-neutral-950
      text-white;
  }

  &::before {
    @apply border-neutral-900
      bg-neutral-950;
  }
}
