/**
 * Code Embed Styles
 *
 * Styles for developer tool embeds: CodePen, CodeSandbox, StackBlitz.
 * Gist embeds use GitHub's own styles loaded via script.
 *
 * Classes:
 *   .code-embed - Base container for all code embeds
 *   .code-embed.codepen - CodePen-specific styling
 *   .code-embed.codesandbox - CodeSandbox-specific styling
 *   .code-embed.stackblitz - StackBlitz-specific styling
 *   .code-embed.code-error - Error state styling
 *   .gist-embed - GitHub Gist container
 *
 * Usage:
 *   :::{codepen} chriscoyier/abc123
 *   :title: CSS Grid Example
 *   :height: 400
 *   :::
 */

/* =============================================================================
   Base Code Embed Container
   ============================================================================= */

.code-embed {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin-block: var(--spacing-4, 1rem);
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
  background-color: var(--color-surface-secondary, #1a1a2e);
}

.code-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* =============================================================================
   Service-Specific Styles
   ============================================================================= */

/* CodePen */
.code-embed.codepen {
  --code-brand-color: #47cf73;
  min-height: 300px;
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
}

.code-embed.codepen iframe {
  border-radius: var(--radius-md, 8px);
}

/* CodeSandbox */
.code-embed.codesandbox {
  --code-brand-color: #ffc619;
  min-height: 400px;
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
}

/* StackBlitz */
.code-embed.stackblitz {
  --code-brand-color: #1389fd;
  min-height: 400px;
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
}

/* =============================================================================
   GitHub Gist Styles
   ============================================================================= */

.gist-embed {
  margin-block: var(--spacing-4, 1rem);
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
}

/* Override GitHub's default gist styles for better theme integration */
.gist-embed .gist {
  font-size: var(--font-size-sm, 0.875rem) !important;
}

.gist-embed .gist .gist-file {
  margin-bottom: 0 !important;
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1)) !important;
  border-radius: var(--radius-md, 8px) !important;
}

.gist-embed .gist .gist-data {
  border-bottom: none !important;
  border-radius: var(--radius-md, 8px) var(--radius-md, 8px) 0 0 !important;
}

.gist-embed .gist .gist-meta {
  padding: var(--spacing-2, 0.5rem) var(--spacing-3, 0.75rem) !important;
  color: var(--color-text-muted, #888) !important;
  background-color: var(--color-surface-secondary, #1a1a2e) !important;
  border-radius: 0 0 var(--radius-md, 8px) var(--radius-md, 8px) !important;
}

.gist-embed .gist .gist-meta a {
  color: var(--color-link, #4fc3f7) !important;
}

/* =============================================================================
   Error States
   ============================================================================= */

.code-embed.code-error,
.gist-embed.gist-error {
  padding: var(--spacing-4, 1rem);
  background-color: var(--color-error-bg, rgba(220, 53, 69, 0.1));
  border: 1px solid var(--color-error-border, rgba(220, 53, 69, 0.3));
  border-radius: var(--radius-md, 8px);
}

.code-embed.code-error .error,
.gist-embed.gist-error .error {
  margin: 0 0 var(--spacing-2, 0.5rem);
  color: var(--color-error, #dc3545);
  font-weight: 600;
}

.code-embed.code-error code,
.gist-embed.gist-error code {
  padding: var(--spacing-1, 0.25rem) var(--spacing-2, 0.5rem);
  font-size: var(--font-size-sm, 0.875rem);
  background-color: var(--color-surface-secondary, rgba(0, 0, 0, 0.2));
  border-radius: var(--radius-sm, 4px);
}

/* =============================================================================
   Noscript Fallback
   ============================================================================= */

.code-embed noscript,
.gist-embed noscript {
  display: block;
  padding: var(--spacing-4, 1rem);
  text-align: center;
  background-color: var(--color-surface-secondary, #1a1a2e);
  border-radius: var(--radius-md, 8px);
}

.code-embed noscript p,
.gist-embed noscript p {
  margin: 0;
}

.code-embed noscript a,
.gist-embed noscript a {
  color: var(--color-link, #4fc3f7);
  text-decoration: underline;
}

.code-embed noscript a:hover,
.gist-embed noscript a:hover {
  color: var(--color-link-hover, #81d4fa);
}

/* =============================================================================
   Loading State
   ============================================================================= */

.code-embed iframe[loading="lazy"] {
  background: var(--color-surface-secondary, #1a1a2e)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23666' stroke-width='2'%3E%3Ccircle cx='20' cy='20' r='18'/%3E%3Cpath d='M20 10v10l8 4'/%3E%3C/g%3E%3C/svg%3E")
    center center no-repeat;
}

/* =============================================================================
   Responsive Adjustments
   ============================================================================= */

@media (max-width: 768px) {
  .code-embed.codepen,
  .code-embed.codesandbox,
  .code-embed.stackblitz {
    min-height: 350px;
  }
}

@media (max-width: 480px) {
  .code-embed.codepen,
  .code-embed.codesandbox,
  .code-embed.stackblitz {
    min-height: 300px;
  }
}

/* =============================================================================
   Print Styles
   ============================================================================= */

@media print {
  .code-embed,
  .gist-embed {
    page-break-inside: avoid;
  }

  .code-embed iframe {
    display: none;
  }

  .code-embed noscript {
    display: block !important;
  }
}

/* =============================================================================
   Dark Mode Adjustments
   ============================================================================= */

@media (prefers-color-scheme: dark) {
  .gist-embed .gist .gist-data {
    background-color: var(--color-surface-primary, #0d0d1a) !important;
  }

  .gist-embed .gist .blob-code {
    color: var(--color-text, #e0e0e0) !important;
  }
}
