@import "tailwindcss";
@config './tailwind.config.js';

@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-700, currentColor);
  }
  @media (prefers-color-scheme: dark) {
    *,
    ::after,
    ::before,
    ::backdrop,
    ::file-selector-button {
      border-color: var(--color-gray-200, currentColor);
    }
  }
}

@layer utilities {
  h1 {
    @apply text-4xl mb-5 mt-1;
  }
  h2 {
    @apply text-3xl mb-4 mt-1;
  }
  h3 {
    @apply text-2xl mb-3 mt-1;
  }
  h4 {
    @apply text-xl mb-2 mt-1;
  }
  h5 {
    @apply text-lg mb-2 mt-1;
  }
  a {
    @apply text-blue-500 hover:text-blue-700 hover:underline dark:text-yellow-300 dark:hover:text-yellow-500;
  }
  body {
    @apply text-base bg-stone-50 dark:text-stone-50 dark:bg-darkest;
  }
  summary {
    @apply block text-sm;
  }
  blockquote {
    @apply bg-gray-100 dark:bg-dark rounded-sm;
  }
  p {
    @apply mt-2 mb-2;
  }
}

@layer components {
  ul.pagination {
    @apply flex flex-row justify-center;
    li {
      @apply border border-gray-500 dark:border-yellow-300 flex justify-center items-center;
    }
    .page-link {
      @apply px-2 sm:px-4 py-1 hover:text-gray-200 dark:hover:text-gray-800 hover:bg-blue-500  dark:hover:bg-yellow-300;
    }
    .active {
      @apply bg-blue-500 pointer-events-none  dark:bg-yellow-300;
      .page-link {
        @apply text-gray-200 dark:text-gray-800;
      }
    }
  }
  .categories {
    @apply p-1 mr-2 mb-2 text-sm rounded-sm hover:shadow-sm;
    @apply text-green-800! bg-green-100! hover:bg-green-200! border! border-green-600! dark:border-green-100!;
  }
  .tags {
    @apply p-1 mr-2 mb-2 text-sm rounded-sm hover:shadow-sm;
    @apply text-gray-800! bg-gray-200! hover:bg-gray-300! border! border-gray-600! dark:border-gray-100!;
  }
  .nav {
    @apply text-lg text-blue-500 dark:text-gray-300 font-semibold;
  }
  .nav-menu-item {
    @apply hover:no-underline p-2 rounded-sm hover:bg-gray-200 dark:hover:bg-gray-800;
  }
  .active {
    @apply overflow-visible;
  }
  .prose ul,
  .prose ol {
    @apply marker:text-gray-700 dark:marker:text-gray-200;
  }
  .accordion {
    @apply text-blue-600 dark:text-yellow-500 my-0;
    > p {
      @apply my-0 p-2 hover:bg-gray-300 rounded-sm dark:hover:bg-darker;
    }
  }
}
