/**
 * Marked Extended Slide - Theme Styles (SCSS)
 * Full visual theme layer with CSS variable customization.
 */

$slide-presentation-bg: #1a1a1a !default;
$slide-accent: #0066cc !default;
$slide-control-bg: rgba(0, 0, 0, 0.6) !default;
$slide-control-hover: rgba(0, 0, 0, 0.8) !default;
$slide-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !default;
$slide-box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !default;
$slide-transition-duration: 0.6s !default;

$slide-themes: (
  default: (bg: #ffffff, text: #333333, accent: #0066cc, border: #dddddd, heading: #1a1a1a, link: #0066cc, code-bg: #f5f5f5, code-text: #c7254e, presentation-bg: #f0f0f0),
  light: (bg: #ffffff, text: #333333, accent: #0066cc, border: #dddddd, heading: #1a1a1a, link: #0066cc, code-bg: #f5f5f5, code-text: #c7254e, presentation-bg: #f0f0f0),
  dark: (bg: #1e1e1e, text: #e0e0e0, accent: #4a9eff, border: #404040, heading: #ffffff, link: #4a9eff, code-bg: #2d2d2d, code-text: #ff6b9d, control-bg: rgba(255, 255, 255, 0.15), control-hover: rgba(255, 255, 255, 0.25), presentation-bg: #0a0a0a),
  solarized-light: (bg: #fdf6e3, text: #657b83, accent: #268bd2, border: #eee8d5, heading: #073642, link: #268bd2, code-bg: #eee8d5, code-text: #dc322f, presentation-bg: #eee8d5),
  solarized-dark: (bg: #002b36, text: #839496, accent: #268bd2, border: #073642, heading: #fdf6e3, link: #2aa198, code-bg: #073642, code-text: #dc322f, control-bg: rgba(147, 161, 161, 0.15), control-hover: rgba(147, 161, 161, 0.25), presentation-bg: #073642),
  dracula: (bg: #282a36, text: #f8f8f2, accent: #bd93f9, border: #44475a, heading: #f8f8f2, link: #8be9fd, code-bg: #44475a, code-text: #ff79c6, control-bg: rgba(68, 71, 90, 0.8), control-hover: rgba(68, 71, 90, 0.95), presentation-bg: #1e1f29),
  nord: (bg: #2e3440, text: #d8dee9, accent: #88c0d0, border: #3b4252, heading: #eceff4, link: #88c0d0, code-bg: #3b4252, code-text: #bf616a, control-bg: rgba(59, 66, 82, 0.8), control-hover: rgba(59, 66, 82, 0.95), presentation-bg: #242933),
  monokai: (bg: #272822, text: #f8f8f2, accent: #66d9ef, border: #3e3d32, heading: #f92672, link: #66d9ef, code-bg: #3e3d32, code-text: #a6e22e, control-bg: rgba(62, 61, 50, 0.8), control-hover: rgba(62, 61, 50, 0.95), presentation-bg: #1e1f1c),
  github-light: (bg: #ffffff, text: #24292f, accent: #0969da, border: #d0d7de, heading: #24292f, link: #0969da, code-bg: #f6f8fa, code-text: #cf222e, presentation-bg: #f6f8fa),
  github-dark: (bg: #0d1117, text: #c9d1d9, accent: #58a6ff, border: #30363d, heading: #f0f6fc, link: #58a6ff, code-bg: #161b22, code-text: #ff7b72, control-bg: rgba(48, 54, 61, 0.8), control-hover: rgba(48, 54, 61, 0.95), presentation-bg: #010409),
  one-dark: (bg: #282c34, text: #abb2bf, accent: #61afef, border: #3e4451, heading: #e5c07b, link: #61afef, code-bg: #3e4451, code-text: #98c379, control-bg: rgba(62, 68, 81, 0.8), control-hover: rgba(62, 68, 81, 0.95), presentation-bg: #21252b),
  gruvbox-light: (bg: #fbf1c7, text: #3c3836, accent: #458588, border: #ebdbb2, heading: #282828, link: #458588, code-bg: #ebdbb2, code-text: #9d0006, presentation-bg: #ebdbb2),
  gruvbox-dark: (bg: #282828, text: #ebdbb2, accent: #83a598, border: #3c3836, heading: #fbf1c7, link: #83a598, code-bg: #3c3836, code-text: #fb4934, control-bg: rgba(60, 56, 54, 0.8), control-hover: rgba(60, 56, 54, 0.95), presentation-bg: #1d2021),
  material: (bg: #263238, text: #eeffff, accent: #82aaff, border: #37474f, heading: #ffffff, link: #89ddff, code-bg: #37474f, code-text: #c3e88d, control-bg: rgba(55, 71, 79, 0.8), control-hover: rgba(55, 71, 79, 0.95), presentation-bg: #1e272e),
  tokyo-night: (bg: #1a1b26, text: #a9b1d6, accent: #7aa2f7, border: #24283b, heading: #c0caf5, link: #7aa2f7, code-bg: #24283b, code-text: #9ece6a, control-bg: rgba(36, 40, 59, 0.8), control-hover: rgba(36, 40, 59, 0.95), presentation-bg: #16161e),
  catppuccin-latte: (bg: #eff1f5, text: #4c4f69, accent: #1e66f5, border: #dce0e8, heading: #dc8a78, link: #1e66f5, code-bg: #dce0e8, code-text: #d20f39, presentation-bg: #dce0e8),
  catppuccin-mocha: (bg: #1e1e2e, text: #cdd6f4, accent: #89b4fa, border: #313244, heading: #fab387, link: #89b4fa, code-bg: #313244, code-text: #f38ba8, control-bg: rgba(49, 50, 68, 0.8), control-hover: rgba(49, 50, 68, 0.95), presentation-bg: #181825),
  cyberpunk: (bg: #0a0e27, text: #00ff9f, accent: #ff006e, border: #1a1f3a, heading: #00d9ff, link: #ff006e, code-bg: #1a1f3a, code-text: #00ff9f, control-bg: rgba(255, 0, 110, 0.3), control-hover: rgba(255, 0, 110, 0.5), presentation-bg: #000514),
  professional: (bg: #ffffff, text: #2c3e50, accent: #3498db, border: #bdc3c7, heading: #2c3e50, link: #3498db, code-bg: #ecf0f1, code-text: #e74c3c, presentation-bg: #ecf0f1),
  high-contrast: (bg: #000000, text: #ffffff, accent: #ffff00, border: #ffffff, heading: #ffffff, link: #00ffff, code-bg: #1a1a1a, code-text: #ffff00, control-bg: rgba(255, 255, 255, 0.3), control-hover: rgba(255, 255, 255, 0.5), presentation-bg: #000000)
) !default;

:root {
  --slide-control-bg: #{$slide-control-bg};
  --slide-control-hover: #{$slide-control-hover};
  --control-bg: var(--slide-control-bg);
  --control-hover: var(--slide-control-hover);
}

.marked-extended-slide-presentation {
  background: $slide-presentation-bg;
  font-family: $slide-font-family;
}

.marked-extended-slide-slide {
  background: var(--slide-bg);
  color: var(--slide-text);
  transition: opacity $slide-transition-duration ease, transform $slide-transition-duration ease;
  box-shadow: $slide-box-shadow;
  border: 1px solid var(--slide-border, rgba(0, 0, 0, 0.1));
}

.marked-extended-slide-layout-cover h1 {
  font-size: 3.5rem;
  margin: 0 0 1rem 0;
}

.marked-extended-slide-layout-center {
  text-align: center;

  h1 {
    font-size: 2.5rem;
  }
}

.marked-extended-slide-layout-statement {
  font-size: 2rem;
  font-weight: bold;
}

.marked-extended-slide-layout-two-cols {
  .marked-extended-slide-slide-content {
    gap: 2rem;
  }
}

.marked-extended-slide-layout-image-right,
.marked-extended-slide-layout-image-left {
  .marked-extended-slide-slide-content {
    gap: 2rem;

    > img {
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }
  }
}

.marked-extended-slide-layout-full {
  padding: 0;
}

.marked-extended-slide-layout-fact {
  text-align: center;

  h1 {
    font-size: 4rem;
    color: var(--slide-accent);
    margin-bottom: 0.5rem;
  }

  p {
    font-size: 1.5rem;
    opacity: 0.8;
  }
}

.marked-extended-slide-layout-quote blockquote {
  font-size: 2rem;
  font-style: italic;
  border-left: 4px solid var(--slide-accent);
  padding-left: 2rem;
}

.marked-extended-slide-layout-section {
  background: var(--slide-accent);
  color: #fff;
}

.marked-extended-slide-control {
  background: var(--slide-control-bg, var(--control-bg));
  border-radius: 50%;
  color: #fff;
  transition: background 0.2s;

  svg {
    fill: #fff;
  }

  &:hover {
    background: var(--slide-control-hover, var(--control-hover));
  }
}

.marked-extended-slide-keyboard-toggle {
  &.active {
    background: var(--slide-accent, $slide-accent);

    &:hover {
      background: var(--slide-accent, $slide-accent);
      opacity: 0.9;
    }
  }

  .keyboard-disabled-indicator {
    stroke: #ff4444;
    stroke-width: 2;
  }
}

.marked-extended-slide-speaker-toggle {
  background: var(--slide-control-bg, var(--control-bg));

  &:hover {
    background: var(--slide-control-hover, var(--control-hover));
  }

  svg {
    fill: #fff;
  }
}

.marked-extended-slide-progress {
  background: rgba(0, 0, 0, 0.3);
}

.marked-extended-slide-progress-bar {
  background: var(--slide-accent);
  transition: width 0.3s ease;
}

.marked-extended-slide-slide-number {
  font-size: 0.875rem;
  color: var(--slide-text, #000);
}

.marked-extended-slide-presentation.overview .marked-extended-slide-slide,
.marked-extended-slide-presentation.overview-mode .marked-extended-slide-slide {
  opacity: 0.8;
  transition: transform 0.2s, opacity 0.2s;

  &:hover {
    transform: scale(0.35);
    opacity: 1;
  }
}

.marked-extended-slide-slide[data-transition="fade"] {
  transition: opacity $slide-transition-duration ease;
}

.marked-extended-slide-slide[data-transition="zoom"] {
  transition: transform $slide-transition-duration ease, opacity $slide-transition-duration ease;
}

.marked-extended-slide-slide[data-transition="zoom"].prev,
.marked-extended-slide-slide[data-transition="zoom"].previous,
.marked-extended-slide-slide[data-transition="zoom"].next {
  transform: translate(-50%, -50%) scale(0);
}

.marked-extended-slide-slide[data-transition="slide-up"].prev,
.marked-extended-slide-slide[data-transition="slide-up"].previous {
  transform: translate(-50%, -200%);
}

.marked-extended-slide-slide[data-transition="slide-up"].next {
  transform: translate(-50%, 100%);
}

.marked-extended-slide-slide[data-transition="slide-down"].prev,
.marked-extended-slide-slide[data-transition="slide-down"].previous {
  transform: translate(-50%, 100%);
}

.marked-extended-slide-slide[data-transition="slide-down"].next {
  transform: translate(-50%, -200%);
}

.marked-extended-slide-slide h1,
.marked-extended-slide-slide h2,
.marked-extended-slide-slide h3,
.marked-extended-slide-slide h4,
.marked-extended-slide-slide h5,
.marked-extended-slide-slide h6 {
  color: var(--slide-heading, var(--slide-text));
}

.marked-extended-slide-slide a {
  color: var(--slide-link, var(--slide-accent));
}

.marked-extended-slide-slide code {
  background: var(--slide-code-bg, rgba(0, 0, 0, 0.05));
  color: var(--slide-code-text, var(--slide-text));
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}

.marked-extended-slide-slide pre code {
  display: block;
  padding: 1em;
  overflow-x: auto;
}

.marked-extended-slide-slide blockquote {
  border-left: 4px solid var(--slide-accent);
  padding-left: 1em;
  margin-left: 0;
  color: var(--slide-text);
  opacity: 0.9;
}

.marked-extended-slide-slide strong {
  color: var(--slide-heading, var(--slide-text));
}

.marked-extended-slide-control:focus-visible,
.marked-extended-slide-keyboard-toggle:focus-visible {
  outline: 2px solid var(--slide-accent, #0066cc);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .marked-extended-slide-slide,
  .marked-extended-slide-control,
  .marked-extended-slide-progress-bar,
  .marked-extended-slide-presentation.overview-mode .marked-extended-slide-slide,
  .marked-extended-slide-presentation.overview .marked-extended-slide-slide {
    transition: none !important;
  }

  .marked-extended-slide-presentation.overview-mode .marked-extended-slide-slide:hover,
  .marked-extended-slide-presentation.overview .marked-extended-slide-slide:hover {
    transform: scale(0.3);
  }
}

@each $name, $theme in $slide-themes {
  .marked-extended-slide-presentation[data-theme="#{$name}"] {
    --slide-bg: #{map-get($theme, bg)};
    --slide-text: #{map-get($theme, text)};
    --slide-accent: #{map-get($theme, accent)};
    --slide-border: #{map-get($theme, border)};
    --slide-heading: #{map-get($theme, heading)};
    --slide-link: #{map-get($theme, link)};
    --slide-code-bg: #{map-get($theme, code-bg)};
    --slide-code-text: #{map-get($theme, code-text)};

    @if map-has-key($theme, control-bg) {
      --slide-control-bg: #{map-get($theme, control-bg)};
      --slide-control-hover: #{map-get($theme, control-hover)};
      --control-bg: var(--slide-control-bg);
      --control-hover: var(--slide-control-hover);
    }

    background: #{map-get($theme, presentation-bg)};
  }
}

body.light .marked-extended-slide-presentation:not([data-theme]) {
  background: #f5f5f5;
  --slide-bg: #ffffff;
  --slide-text: #333;
  --slide-accent: #0066cc;
  --slide-heading: #222;
}

body.light .marked-extended-slide-presentation:not([data-theme]) .marked-extended-slide-slide {
  background: #ffffff;
  color: #333;
  border-color: rgba(0, 0, 0, 0.1);
}

body.dark .marked-extended-slide-presentation:not([data-theme]) {
  background: #1a1a1a;
  --slide-bg: #2d2d2d;
  --slide-text: #e0e0e0;
  --slide-accent: #4a9eff;
  --slide-heading: #f0f0f0;
}

body.dark .marked-extended-slide-presentation:not([data-theme]) .marked-extended-slide-slide {
  background: #2d2d2d;
  color: #e0e0e0;
  border-color: rgba(255, 255, 255, 0.1);
}

@media print {
  .marked-extended-slide-presentation {
    background: #fff;
  }

  .marked-extended-slide-controls,
  .marked-extended-slide-progress,
  .marked-extended-slide-slide-number {
    display: none !important;
  }

  .marked-extended-slide-slide {
    box-shadow: none;
    border: 1px solid #ccc;
  }
}