.prose {
  @apply text-zinc-600 leading-loose;
  word-break: break-word;
}

.prose > p {
  @apply mb-5;
}

.prose img {
  @apply inline-block;
}

.prose > *:first-child {
  @apply mt-0;
}

.prose > *:last-child {
  @apply mb-0;
}

.prose .xlog-anchor {
  @apply ml-1 opacity-0 transition-opacity hover:no-underline;
}

.prose h2:hover .xlog-anchor,
.prose h3:hover .xlog-anchor,
.prose h4:hover .xlog-anchor,
.prose h5:hover .xlog-anchor,
.prose h6:hover .xlog-anchor {
  @apply opacity-100;
}

.prose h2 {
  @apply text-3xl font-semibold;
  @apply my-7;
  @apply text-zinc-900;
}

.prose h3 {
  @apply text-2xl font-semibold;
  @apply my-7;
  @apply text-zinc-900;
}

.prose h4 {
  @apply text-xl font-semibold;
  @apply my-7;
  @apply text-zinc-900;
}

.prose h5 {
  @apply text-lg font-semibold;
  @apply my-7;
  @apply text-zinc-900;
}

.prose h6 {
  @apply text-base font-semibold;
  @apply my-7;
  @apply text-zinc-900;
}

.prose p {
  @apply my-3;
}

.prose blockquote {
  @apply border-l-4 border-zinc-300;
  @apply pl-5;
  @apply my-3;
  @apply text-zinc-500;
}

.prose ul {
  @apply list-disc;
  @apply pl-5;
}

.prose ol {
  @apply list-decimal;
  @apply pl-6;
}

.prose > ul,
.prose > ol {
  @apply my-7;
}

.prose a {
  @apply text-accent;
  @apply hover:underline;
}

.prose pre {
  @apply overflow-auto;
}

.prose .table-wrapper {
  @apply min-w-full rounded-xl text-sm my-7 whitespace-nowrap overflow-auto;
  @apply border border-border;
}

.prose table {
  @apply min-w-full;
}

.prose table thead {
  @apply text-left;
}

.prose table th,
.prose table td {
  @apply px-3;
  @apply py-4;
}

.prose table tbody {
  @apply text-zinc-500;
}

.prose table tbody tr:nth-child(2n-1) {
  @apply bg-zinc-100;
}

.prose iframe {
  max-width: 100%;
}

.prose .task-list-item {
  @apply list-none;
}

.prose > ul > .task-list-item {
  @apply -ml-5;
}

:root {
  --callout-bg-info: hsl(223, 14%, 61%, 0.14);
  --callout-bg-tip: hsl(146, 76%, 48%, 0.14);
  --callout-bg-important: hsl(237, 100%, 70%, 0.14);
  --callout-bg-warning: hsl(45, 93%, 47%, 0.14);
  --callout-bg-danger: hsl(350, 89%, 60%, 0.14);
}

:root.dark {
  --callout-bg-info: hsl(210, 14%, 46%, 0.16);
  --callout-bg-tip: hsl(146, 76%, 48%, 0.16);
  --callout-bg-important: hsl(237, 100%, 70%, 0.16);
  --callout-bg-warning: hsl(45, 93%, 47%, 0.16);
  --callout-bg-danger: hsl(350, 89%, 60%, 0.16);
}

.prose .callout {
  --calloutBackgroundColor: var(--callout-bg-color, var(--callout-bg-info));
  background-color: var(--calloutBackgroundColor);
  border-radius: 8px;
  padding: 16px;
}

.prose .callout-indicator {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  text-transform: uppercase;
  font-weight: 600;
}

.prose .callout-indicator > svg:first-of-type {
  margin-right: 0.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5px;
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}

.prose .callout-content:first-child,
.prose .callout-content:only-child {
  margin-block-start: 0;
}

.prose .callout-content:last-child,
.prose .callout-content:only-child {
  margin-block-end: 0;
}

.prose .callout-commend {
  --callout-bg-color: var(--callout-bg-tip);
}
.prose .callout-warn {
  --callout-bg-color: var(--callout-bg-warning);
}
.prose .callout-deter {
  --callout-bg-color: var(--callout-bg-danger);
}
.prose .callout-assert {
  --callout-bg-color: var(--callout-bg-important);
}

.prose .code-wrapper {
  @apply relative text-base;
}

.prose .code-wrapper .copy-button {
  @apply absolute top-3 right-3;
  @apply text-sm space-x-1;
  @apply text-zinc-100 bg-zinc-600/50;
  @apply rounded-lg h-7 px-3 items-center;
  @apply active:mt-[2px];
  @apply hidden;
}

.prose .code-wrapper:hover .copy-button {
  @apply inline-flex;
}

.prose .math {
  @apply max-w-full inline-block overflow-auto align-bottom scrollbar-hide;
}

.xlog-comment .prose {
  @apply leading-normal text-[15px];
}

.xlog-comment .prose blockquote {
  @apply my-1;
}

.xlog-comment .prose p {
  @apply my-1;
}
