/* Styles for Shiki code highlighting via CDN */

/* Base code styling for all Shiki pre elements */
pre.shiki {
  @apply font-mono text-sm overflow-x-auto rounded-lg my-4 p-4;
  max-width: 100%;
  background-color: #0d1117 !important; /* GitHub Dark background */
  color: #e1e4e8 !important; /* Light text color for dark background */
}

/* Style for each line without line numbers */
pre.shiki .line {
  @apply block;
}

/* Code block container adjustments for specific languages */
pre.shiki[data-language="bash"] {
  @apply bg-zinc-950 text-zinc-300;
}

pre.shiki[data-language="json"] {
  @apply bg-zinc-900 text-zinc-200;
}

/* Loading indicator for code blocks */
.shiki-loading {
  @apply font-mono text-sm flex justify-center items-center my-4 p-4 rounded-lg;
  background-color: #0d1117;
  color: #8b949e;
  min-height: 5rem;
  position: relative;
}

.shiki-loading::before {
  content: '';
  @apply absolute w-5 h-5 border-2 border-transparent border-t-emerald-500 rounded-full;
  animation: shiki-loading-spin 1s linear infinite;
}

@keyframes shiki-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Make code blocks more readable on mobile */
@media (max-width: 640px) {
  pre.shiki, .shiki-loading {
    @apply text-xs p-3;
  }
}

/* Inline code styling (not in a pre block) */
:not(pre) > code {
  @apply font-mono text-sm bg-zinc-800 px-1.5 py-0.5 rounded text-zinc-200;
}

/* Code block headers */
.code-header {
  @apply flex items-center justify-between rounded-t-lg px-4 py-2 text-sm text-zinc-300 bg-zinc-700 border-b border-zinc-600;
}

/* Copy button styling */
.copy-button {
  @apply p-1 rounded-md hover:bg-zinc-600 transition-colors;
  @apply focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-zinc-800 focus:ring-emerald-500;
}

.copy-button svg {
  @apply text-zinc-400;
}

.copy-button:hover svg {
  @apply text-zinc-200;
}

/* When a code header is present, adjust the code block border radius */
.code-header + pre.shiki {
  @apply rounded-t-none;
}