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

button:not(.unstyled) {
  @apply inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm sm:text-lg font-medium rounded-md text-gray-700 bg-gray-100;
}

pre,
pre code {
  @apply !text-xs md:!text-sm;
}

pre code[class*='language-'] {
  white-space: pre-wrap;
}

.prose {
  max-width: none;
}

/* disable prose styles on dialogs */
[role='dialog'] h1,
[role='dialog'] h2,
[role='dialog'] h3,
[role='dialog'] h4,
[role='dialog'] h5,
[role='dialog'] h6,
[role='dialog'] p {
  margin-top: initial !important;
  margin-bottom: initial !important;
}

.backdrop {
  z-index: 1;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
}

[role='dialog'] {
  z-index: 2;
}