@import "tailwindcss";

@plugin "tailwindcss-animate";
@plugin "@tailwindcss/typography";

@import "./config.css";
@import "./utilities.css";
@import "./code.css";

@custom-variant dark (&:where(.dark, .dark *));

@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-border, currentColor);
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    @apply bg-background text-foreground;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply font-serif;
  }

  ::selection {
    @apply bg-link text-primary-foreground;
  }

  ::-webkit-scrollbar {
    @apply w-2;
  }

  ::-webkit-scrollbar-track {
    @apply bg-background;
  }

  ::-webkit-scrollbar-thumb {
    @apply bg-muted-foreground/50 rounded-full;
  }

  ::-webkit-scrollbar-thumb:hover {
    @apply bg-muted-foreground;
  }

  .react-activity-calendar {
    width: auto !important;
  }

  .react-activity-calendar svg {
    @apply h-auto w-full;
  }

  .prose blockquote p {
    font-style: normal;
  }

  .prose code::after,
  .prose code::before {
    content: none !important;
  }

  input[type="search"]::-ms-clear {
    @apply hidden;
  }
  input[type="search"]::-ms-reveal {
    @apply hidden;
  }

  input[type="search"]::-webkit-search-decoration,
  input[type="search"]::-webkit-search-cancel-button,
  input[type="search"]::-webkit-search-results-button,
  input[type="search"]::-webkit-search-results-decoration {
    @apply hidden;
  }
}
