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

/* Tippy tooltips */
.tippy-box[data-theme~="bm"] {
  @apply bg-stone-800 font-sans text-sm text-stone-50 dark:bg-zinc-900 dark:text-zinc-100;
}
.tippy-box[data-theme~="bm"][data-placement^="top"] > .tippy-arrow::before {
  @apply border-t-stone-800 dark:border-t-zinc-900;
}
.tippy-box[data-theme~="bm"][data-placement^="bottom"] > .tippy-arrow::before {
  @apply border-b-stone-800 dark:border-b-zinc-900;
}
.tippy-box[data-theme~="bm"][data-placement^="left"] > .tippy-arrow::before {
  @apply border-l-stone-800 dark:border-l-zinc-900;
}
.tippy-box[data-theme~="bm"][data-placement^="right"] > .tippy-arrow::before {
  @apply border-r-stone-800 dark:border-r-zinc-900;
}

@layer components {
  .text-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;
  }

  .button-close {
    @apply rounded-full p-[6px] text-stone-800 hover:bg-stone-300 hover:text-stone-800 focus:bg-stone-300 focus:text-stone-800 sm:p-2 dark:text-zinc-300 dark:hover:bg-zinc-500 dark:hover:text-zinc-800 dark:focus:bg-zinc-500 dark:focus:text-zinc-800;
  }
}