/**
 * Marked Extended Embeds - Theme Styles (SCSS)
 * Full visual theme layer with CSS variable customization.
 *
 * Import this file after the structural styles:
 * @import '@fsegurai/marked-extended-embeds/styles/embeds.scss';
 * @import '@fsegurai/marked-extended-embeds/styles/embeds-theme.scss';
 */

$embed-radius: 0.5rem !default;
$embed-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !default;
$embed-shadow-dark: 0 2px 8px rgba(0, 0, 0, 0.3) !default;
$embed-bg-light: #f5f5f5 !default;
$embed-bg-dark: #1e1e1e !default;

$embed-caption-text-align: center !default;
$embed-caption-padding: 0.75rem 1rem !default;
$embed-caption-size: 0.875rem !default;
$embed-caption-bg-light: #fafafa !default;
$embed-caption-bg-dark: #2a2a2a !default;
$embed-caption-color-light: #666 !default;
$embed-caption-color-dark: #e0e0e0 !default;
$embed-caption-border-light: #e0e0e0 !default;
$embed-caption-border-dark: #3a3a3a !default;

$embed-loading-color-light: #666 !default;
$embed-loading-color-dark: #ccc !default;
$embed-loading-size: 0.875rem !default;
$embed-spinner-track-light: #e0e0e0 !default;
$embed-spinner-track-dark: #333 !default;
$embed-spinner-color-light: #2196f3 !default;
$embed-spinner-color-dark: #64b5f6 !default;

$embed-provider-video-bg: #000 !default;
$embed-provider-codepen-bg: #1e1e1e !default;
$embed-provider-codesandbox-bg: #151515 !default;
$embed-provider-spotify-bg: #191414 !default;
$embed-provider-white-bg: #fff !default;
$embed-provider-pdf-bg: #525659 !default;
$embed-provider-gist-bg: #f6f8fa !default;
$embed-provider-gist-bg-dark: #0d1117 !default;
$embed-provider-soundcloud-bg: #ff5500 !default;
$embed-provider-mermaid-padding: 1rem !default;

:root {
  --marked-embeds-radius: #{$embed-radius};
  --marked-embeds-shadow: #{$embed-shadow};
  --marked-embeds-bg: #{$embed-bg-light};

  --marked-embeds-caption-padding: #{$embed-caption-padding};
  --marked-embeds-caption-size: #{$embed-caption-size};
  --marked-embeds-caption-bg: #{$embed-caption-bg-light};
  --marked-embeds-caption-color: #{$embed-caption-color-light};
  --marked-embeds-caption-border: #{$embed-caption-border-light};

  --marked-embeds-loading-color: #{$embed-loading-color-light};
  --marked-embeds-loading-size: #{$embed-loading-size};
  --marked-embeds-spinner-track: #{$embed-spinner-track-light};
  --marked-embeds-spinner-color: #{$embed-spinner-color-light};

  --marked-embeds-provider-video-bg: #{$embed-provider-video-bg};
  --marked-embeds-provider-codepen-bg: #{$embed-provider-codepen-bg};
  --marked-embeds-provider-codesandbox-bg: #{$embed-provider-codesandbox-bg};
  --marked-embeds-provider-spotify-bg: #{$embed-provider-spotify-bg};
  --marked-embeds-provider-white-bg: #{$embed-provider-white-bg};
  --marked-embeds-provider-pdf-bg: #{$embed-provider-pdf-bg};
  --marked-embeds-provider-gist-bg: #{$embed-provider-gist-bg};
  --marked-embeds-provider-soundcloud-bg: #{$embed-provider-soundcloud-bg};
  --marked-embeds-provider-mermaid-padding: #{$embed-provider-mermaid-padding};
}

body.dark {
  --marked-embeds-shadow: #{$embed-shadow-dark};
  --marked-embeds-bg: #{$embed-bg-dark};
  --marked-embeds-caption-bg: #{$embed-caption-bg-dark};
  --marked-embeds-caption-color: #{$embed-caption-color-dark};
  --marked-embeds-caption-border: #{$embed-caption-border-dark};
  --marked-embeds-loading-color: #{$embed-loading-color-dark};
  --marked-embeds-spinner-track: #{$embed-spinner-track-dark};
  --marked-embeds-spinner-color: #{$embed-spinner-color-dark};
  --marked-embeds-provider-gist-bg: #{$embed-provider-gist-bg-dark};
}

.marked-extended-embed-container {
  border-radius: var(--marked-embeds-radius, $embed-radius);
  background: var(--marked-embeds-bg, $embed-bg-light);
  box-shadow: var(--marked-embeds-shadow, $embed-shadow);
}

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

.marked-extended-embed-spinner {
  border-color: var(--marked-embeds-spinner-track, $embed-spinner-track-light);
  border-top-color: var(--marked-embeds-spinner-color, $embed-spinner-color-light);
}

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

.marked-extended-embed-caption {
  text-align: var(--marked-embeds-caption-text-align, $embed-caption-text-align);
  padding: var(--marked-embeds-caption-padding, $embed-caption-padding);
  font-size: var(--marked-embeds-caption-size, $embed-caption-size);
  color: var(--marked-embeds-caption-color, $embed-caption-color-light);
  background: var(--marked-embeds-caption-bg, $embed-caption-bg-light);
  border-top: 1px solid var(--marked-embeds-caption-border, $embed-caption-border-light);
}

.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, $embed-provider-video-bg);
}

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

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

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

.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, $embed-provider-white-bg);
}

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

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

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

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

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, $embed-bg-dark);
}

@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;
  }
}