@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .text-link,
  .pagefind-ui .pagefind-ui__result-link {
    @apply text-stone-800 hover:text-bm-500 focus:text-bm-500 dark:text-zinc-300 dark:hover:text-bm-400 dark:focus:text-bm-400;
  }

  .pagefind-ui {
    --pagefind-ui-primary: theme(colors.stone.800);
    --pagefind-ui-text: theme(colors.stone.900);
    --pagefind-ui-background: theme(colors.stone.50);
    --pagefind-ui-border: theme(colors.stone.400);
    --pagefind-ui-tag: theme(colors.bm.300);

    --pagefind-ui-scale: 0.8;
    --pagefind-ui-font: theme(fontFamily.sans);
    --pagefind-ui-border-width: 1px;
    --pagefind-ui-border-radius: 8px;
    --pagefind-ui-image-border-radius: 0px;
  }

  @media screen(md) {
    .pagefind-ui {
      --pagefind-ui-scale: 0.9;
    }
  }

  @media not print {
    .dark .pagefind-ui {
      --pagefind-ui-primary: theme(colors.stone.200);
      --pagefind-ui-text: theme(colors.stone.100);
      --pagefind-ui-background: theme(colors.stone.700);
      --pagefind-ui-border: theme(colors.stone.500);
      --pagefind-ui-tag: theme(colors.green.800);
    }
  }
}
