/* Code component styles */
.code {
  font-feature-settings: "calt" 1;
  text-rendering: optimizeLegibility;
}

.code[class*="language-"] {
  font-family:
    "Monaco", "Menlo", "Ubuntu Mono", "Consolas", "source-code-pro", monospace;
}

/* Inline code styles */
.code--inline {
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
}

/* Punctuation token color */
.token.punctuation {
  color: #abb2bf;
}

/* Code container styles */
.code-container {
  &.inline {
    display: inline;
  }

  &.block {
    display: block;
  }
}

/* Inline code element styles */
.code-inline {
  display: inline;
  font-family: monospace;
  font-size: 0.875rem; /* text-sm */
  line-height: 1.625; /* leading-relaxed */
  white-space: pre-wrap;
  max-height: 300px; /* max-h-[300px] */
}

/* Block code element styles */
.code-block {
  display: block;
  font-family: monospace;
  font-size: 0.875rem; /* text-sm */
  line-height: 1.625; /* leading-relaxed */
  white-space: pre-wrap;
  max-height: 300px; /* max-h-[300px] */
}

/* Pre element styles for block code */
.pre-block {
  overflow: auto;
  margin: 0;
  margin-bottom: 1rem; /* mb-4 */
}