/**
 * Marked Extended Embeds - Theme Styles
 * Full visual theme layer with CSS variable customization.
 */

:root {
  --marked-embeds-radius: 0.5rem;
  --marked-embeds-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  --marked-embeds-bg: #f5f5f5;

  --marked-embeds-caption-text-align: center;
  --marked-embeds-caption-padding: 0.75rem 1rem;
  --marked-embeds-caption-size: 0.875rem;
  --marked-embeds-caption-bg: #fafafa;
  --marked-embeds-caption-color: #666;
  --marked-embeds-caption-border: #e0e0e0;

  --marked-embeds-loading-color: #666;
  --marked-embeds-loading-size: 0.875rem;
  --marked-embeds-spinner-track: #e0e0e0;
  --marked-embeds-spinner-color: #2196f3;

  --marked-embeds-provider-video-bg: #000;
  --marked-embeds-provider-codepen-bg: #1e1e1e;
  --marked-embeds-provider-codesandbox-bg: #151515;
  --marked-embeds-provider-spotify-bg: #191414;
  --marked-embeds-provider-white-bg: #fff;
  --marked-embeds-provider-pdf-bg: #525659;
  --marked-embeds-provider-gist-bg: #f6f8fa;
  --marked-embeds-provider-soundcloud-bg: #ff5500;
  --marked-embeds-provider-mermaid-padding: 1rem;
}

body.dark {
  --marked-embeds-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  --marked-embeds-bg: #1e1e1e;
  --marked-embeds-caption-bg: #2a2a2a;
  --marked-embeds-caption-color: #e0e0e0;
  --marked-embeds-caption-border: #3a3a3a;
  --marked-embeds-loading-color: #ccc;
  --marked-embeds-spinner-track: #333;
  --marked-embeds-spinner-color: #64b5f6;
  --marked-embeds-provider-gist-bg: #0d1117;
}

.marked-extended-embed-container {
  border-radius: var(--marked-embeds-radius, 0.5rem);
  background: var(--marked-embeds-bg, #f5f5f5);
  box-shadow: var(--marked-embeds-shadow, 0 2px 8px rgba(0, 0, 0, 0.1));
}

.marked-extended-embed-loading {
  color: var(--marked-embeds-loading-color, #666);
}

.marked-extended-embed-spinner {
  border-color: var(--marked-embeds-spinner-track, #e0e0e0);
  border-top-color: var(--marked-embeds-spinner-color, #2196f3);
}

.marked-extended-embed-loading-text {
  font-size: var(--marked-embeds-loading-size, 0.875rem);
  font-weight: 500;
}

.marked-extended-embed-caption {
  text-align: var(--marked-embeds-caption-text-align, center);
  padding: var(--marked-embeds-caption-padding, 0.75rem 1rem);
  font-size: var(--marked-embeds-caption-size, 0.875rem);
  color: var(--marked-embeds-caption-color, #666);
  background: var(--marked-embeds-caption-bg, #fafafa);
  border-top: 1px solid var(--marked-embeds-caption-border, #e0e0e0);
}

.marked-extended-embed-container[data-provider="youtube"],
.marked-extended-embed-container[data-provider="vimeo"],
.marked-extended-embed-container[data-provider="loom"] {
  background: var(--marked-embeds-provider-video-bg, #000);
}

.marked-extended-embed-container[data-provider="codepen"] {
  background: var(--marked-embeds-provider-codepen-bg, #1e1e1e);
}

.marked-extended-embed-container[data-provider="codesandbox"] {
  background: var(--marked-embeds-provider-codesandbox-bg, #151515);
}

.marked-extended-embed-container[data-provider="spotify"] {
  background: var(--marked-embeds-provider-spotify-bg, #191414);
}

.marked-extended-embed-container[data-provider="mermaid"],
.marked-extended-embed-container[data-provider="twitter"],
.marked-extended-embed-container[data-provider="figma"],
.marked-extended-embed-container[data-provider="miro"],
.marked-extended-embed-container[data-provider="excalidraw"],
.marked-extended-embed-container[data-provider="drawio"],
.marked-extended-embed-container[data-provider="diagrams-net"] {
  background: var(--marked-embeds-provider-white-bg, #fff);
}

.marked-extended-embed-container[data-provider="mermaid"] {
  padding: var(--marked-embeds-provider-mermaid-padding, 1rem);
}

.marked-extended-embed-container[data-provider="pdf"] {
  background: var(--marked-embeds-provider-pdf-bg, #525659);
}

.marked-extended-embed-container[data-provider="github-gist"] {
  background: var(--marked-embeds-provider-gist-bg, #f6f8fa);
}

.marked-extended-embed-container[data-provider="soundcloud"] {
  background: var(--marked-embeds-provider-soundcloud-bg, #ff5500);
}

body.dark .marked-extended-embed-container[data-provider="mermaid"],
body.dark .marked-extended-embed-container[data-provider="twitter"],
body.dark .marked-extended-embed-container[data-provider="figma"],
body.dark .marked-extended-embed-container[data-provider="miro"],
body.dark .marked-extended-embed-container[data-provider="excalidraw"],
body.dark .marked-extended-embed-container[data-provider="drawio"],
body.dark .marked-extended-embed-container[data-provider="diagrams-net"] {
  background: var(--marked-embeds-bg, #1e1e1e);
}

@media print {
  .marked-extended-embed-container {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ccc;
  }

  .marked-extended-embed-loading,
  .marked-extended-embed-spinner {
    display: none;
  }
}