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

@layer base {
  [x-cloak] {
    display: none !important;
  }

  body {
    @apply text-slate dark:text-white;
    @apply font-cairo;
  }
  h1 {
    @apply text-6xl;
    @apply mb-3;
  }
  h2 {
    @apply text-slate dark:text-white;
    @apply text-4xl;
    @apply my-5;
  }
  h3 {
    @apply text-2xl;
  }
  h4 {
    @apply text-xl;
  }
  h5 {
    @apply text-base
  }
  p {
    @apply py-5;
  }
  p a {
    @apply text-orange;
  }
  pre {
    @apply p-6;
  }
  /* Forum style overrides */
  textarea {
    @apply w-full rounded bg-white dark:bg-charcoal border border-slate;
  }
  input[type=email] {
    @apply w-full rounded bg-white dark:bg-charcoal border border-slate mt-3;
  }
  input[type=checkbox] {
    @apply mr-3 rounded bg-white dark:bg-charcoal border border-slate text-orange;
  }
  input[type=file] {
    @apply block w-full px-3 py-1 text-base text-slate dark:text-white font-normal text-orange bg-clip-padding border border-solid border-slate rounded transition ease-in-out my-2;
  }
  #signup_form input[type=email],
  #signup_form input[type=password]{
    @apply rounded bg-white dark:bg-charcoal text-slate dark:text-white border border-slate w-full;
  }
  #authpages #footerSignup {
    @apply hidden;
  }
  /* Dark mode scrollbar */
  .dark ::-webkit-scrollbar {
    @apply bg-gray-600;
  }
  .dark ::-webkit-scrollbar-track {
    @apply bg-gray-700;
  }
  .dark ::-webkit-scrollbar-thumb {
    @apply bg-gray-600 w-5 h-5;
  }
  .dark ::-webkit-scrollbar-button:start:decrement {
    @apply bg-gray-700;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23808080" stroke="%23808080" stroke-width="2" d="M6 15l6-6 6 6"/></svg>');
    @apply object-center;
  }
  .dark ::-webkit-scrollbar-button:end:increment {
    @apply bg-gray-700;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23808080" stroke="%23808080" stroke-width="2" d="M7 9l5.25 5.25L18.5 9"/></svg>');
    @apply object-center
  }
  /* Generic link style */
  a {
    @apply text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange;
    @apply group-hover:text-orange dark:group-hover:text-orange;
  }
  i.fa, i.fab, i.fa-brands {
    @apply text-slate dark:text-white;
  }
}