/* Code Window Extension for Quarto
 * Code block window decorations with multiple styles
 * MIT License - Mickaël Canouil 2026
 */

/* ============================================================================
 * Base container
 * ========================================================================= */

.code-with-filename {
  margin: 1.5em 0;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, currentColor 15%, Canvas);
  background-color: Canvas;
  overflow: hidden;
  page-break-inside: avoid;
  break-inside: avoid;
}

/* Title bar (shared across all styles) */
.code-with-filename .code-with-filename-file {
  display: flex;
  align-items: center;
  gap: 0.75em;
  background-color: color-mix(in srgb, currentColor 5%, Canvas);
  border: none;
  border-bottom: 1px solid color-mix(in srgb, currentColor 15%, Canvas);
  border-radius: 0;
  padding: 0.2em 1em;
  line-height: 1.2;
  margin: 0;
  page-break-after: avoid;
  break-after: avoid;
}

/* Shrink title bar ~35% on Reveal.js slides (scales padding, decorations, and filename text proportionally) */
.reveal .code-with-filename .code-with-filename-file {
  font-size: 0.65em;
  padding: 0.3em 1em;
}

/* Filename styling (base) */
.code-with-filename .code-with-filename-file pre {
  flex: 1;
  margin: 0;
  padding: 0;
  background-color: transparent;
  border: none;
  font-size: 0.85em;
  font-weight: 500;
  color: color-mix(in srgb, currentColor 50%, Canvas);
}

/* Code block content area */
.code-with-filename .sourceCode,
.code-with-filename div.sourceCode,
.code-with-filename .code-copy-outer-scaffold {
  margin: 0;
  border: none;
  border-radius: 0;
}

.code-with-filename .sourceCode pre,
.code-with-filename div.sourceCode pre,
.code-with-filename .code-copy-outer-scaffold pre {
  margin: 0;
  border: none;
  border-radius: 0;
}

/* Plain code blocks (unknown language without sourceCode wrapper) */
.code-with-filename > pre {
  margin: 0;
  border: none;
  border-radius: 0;
}

/* Auto-generated filenames display in simulated small caps */
.code-with-filename.code-window-auto .code-with-filename-file pre strong {
  text-transform: uppercase;
  font-size: 0.8em;
}

/* Code block bottom border-radius */
.code-with-filename .code-copy-outer-scaffold {
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}

/* ============================================================================
 * Style: default (plain filename, no decorations)
 * ========================================================================= */

.code-with-filename.code-window-default .code-with-filename-file pre {
  text-align: left;
}

/* ============================================================================
 * Style: macos (traffic lights left, filename right)
 * ========================================================================= */

.code-with-filename.code-window-macos .code-with-filename-file::before {
  content: '';
  display: inline-flex;
  flex-shrink: 0;
  width: 3.4em;
  height: 0.85em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='10'%3E%3Ccircle cx='5' cy='5' r='5' fill='%23ff5f56'/%3E%3Ccircle cx='20' cy='5' r='5' fill='%23ffbd2e'/%3E%3Ccircle cx='35' cy='5' r='5' fill='%2327c93f'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.code-with-filename.code-window-macos .code-with-filename-file pre {
  text-align: right;
}

/* ============================================================================
 * Style: windows (filename left, window buttons right)
 * ========================================================================= */

.code-with-filename.code-window-windows .code-with-filename-file pre {
  text-align: left;
}

.code-with-filename.code-window-windows .code-with-filename-file::after {
  content: '';
  display: inline-flex;
  flex-shrink: 0;
  width: 3.6em;
  height: 0.85em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='10' fill='none'%3E%3Cline x1='3' y1='5' x2='11' y2='5' stroke='%23888' stroke-width='1.5' stroke-linecap='round'/%3E%3Crect x='17' y='1' width='8' height='8' rx='1' stroke='%23888' stroke-width='1.5' fill='none'/%3E%3Cline x1='31' y1='1' x2='39' y2='9' stroke='%23888' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='39' y1='1' x2='31' y2='9' stroke='%23888' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-position: right;
  background-size: contain;
  background-repeat: no-repeat;
}