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

body,
#__next,
html {
  @apply h-full font-sans font-light bg-zinc-900 text-white tracking-wide;
}

code {
  @apply font-mono;
}

#root {
  @apply h-full;
}

@layer components {
  .dropdown-menu-item {
    @apply flex w-full cursor-pointer items-center space-x-2 rounded-md p-2 text-zinc-100 transition-colors duration-300 hover:bg-zinc-700 hover:text-white active:bg-zinc-900 active:ring-2 active:ring-inset active:ring-cyan-500/20 active:text-cyan-500;
  }
}

.checkbox {
  @apply rounded border-2 border-zinc-500 w-4 h-4 transition-colors duration-300 cursor-pointer hover:border-zinc-400;
}

.checkbox.checked {
  @apply border-cyan-500 bg-cyan-500/50 text-white hover:border-cyan-400;
}

.checkmark {
  @apply w-full h-full bg-no-repeat;
  background-image: url('../public/checkmark.svg');
  background-size: 70%;
  background-position: 56% 58%;
}

.prose-condensed {
  @apply prose-headings:mt-1 prose-headings:mb-0;
}

.prose {
  @apply prose-headings:font-medium;
}

::-webkit-scrollbar {
  @apply w-1 h-1 rounded;
}

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

::-webkit-scrollbar-thumb {
  @apply bg-zinc-700 rounded;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-zinc-400 rounded;
}

::-webkit-scrollbar-corner {
  @apply bg-transparent;
}

@supports (-webkit-touch-callout: none) {
  .h-screen {
      height: 100dvh; /* Override height for Safari */
  }
  .min-h-screen {
      min-height: 100dvh; /* Override height for Safari */
  }
}

/* In smaller screens, font-sizes smaller than 16px cause
   disruptive zooming. Setting to 16px for input text fields
   fixes this. Issue: https://github.com/polywrap/evo.ninja/issues/620 */
@media screen and (max-width: 480px) {
  input, textarea {
      font-size: 16px !important;
  }
}
