/* Minimal container for CodeMirror */
.editor-view {
  min-height: 100%;
  width: 100%;
  container-type: inline-size;
  container-name: editor;
  background-color: var(--editor-color-background);
}

/* Ensure text cursor in CodeMirror editor */
.editor-view .cm-editor .cm-content {
  cursor: text !important;
}

/* Fix selection artifacts - hide selections when editor loses focus */
.editor-view:not(:focus-within) .cm-selectionBackground {
  visibility: hidden !important;
}

/* iA Writer Editor Theme Variables */

/* Inline Code Styling - this works reliably */
.cm-editor .cm-line [class*='inlineCode'] {
  background-color: var(--editor-color-codeblock-background);
  font-family: 'iA Writer Mono Variable', 'iA Writer Mono', monospace;
  padding: 1px 3px;
  border-radius: 2px;
}

/* Focus Mode Styling */
.cm-focus-dimmed {
  opacity: 0.3;
  transition: opacity 0.2s ease-in-out;
}

/* Optional: Add subtle fade transition */
.cm-editor {
  transition: opacity 0.2s ease-in-out;
}

.cm-editor.focus-mode-enabled {
  /* Could add any global focus mode styling here */
}

/* Typewriter Mode Enhancements */
.cm-editor.typewriter-mode {
  position: relative;
}

.cm-editor.typewriter-mode::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(
    to bottom,
    var(--editor-color-background) 0%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

.cm-editor.typewriter-mode::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(
    to top,
    var(--editor-color-background) 0%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Ensure content stays above gradients */
.cm-editor.typewriter-mode .cm-content {
  position: relative;
  z-index: 2;
}

/* URL Alt+Click Styling */
.alt-pressed .cm-content {
  cursor: default !important;
}

/* Simple URL hover styling when Alt is pressed - just background and cursor */
.url-alt-hover:hover {
  background-color: color-mix(
    in srgb,
    var(--editor-color-carat) 15%,
    transparent
  ) !important;
  cursor: pointer !important;
  border-radius: 3px;
}

/* Common Colors */
:root {
  --editor-color-carat: rgba(0, 195, 255, 1);
}

/* Light Mode Colors */
:root {
  --editor-color-background: rgba(247, 247, 247, 1);
  --editor-color-text: rgba(25, 25, 25, 1);
  --editor-color-mdtag: rgba(179, 181, 176, 1);
  --editor-color-underline: rgba(214, 212, 209, 1);
  --editor-color-brown: rgba(165, 101, 27, 1);
  --editor-color-red: rgba(201, 72, 37, 1);
  --editor-color-pink: rgba(177, 79, 159, 1);
  --editor-color-blue: rgba(53, 118, 182, 1);
  --editor-color-green: rgba(66, 131, 44, 1);
  --editor-color-codeblock-background: rgba(238, 238, 238, 1);
  --editor-color-selectedtext-background: rgba(185, 234, 250, 1);
  --editor-color-heading: #191919; /* Default to text color, overridden by JS */

  /* Future use */
  --editor-color-highlight-background: rgba(252, 236, 147, 1);
  --editor-color-highlight-underline: rgba(255, 215, 0, 1);
  --editor-color-highlight-text: var(--editor-color-text);
}

/* Dark Mode Colors */
.dark {
  --editor-color-background: rgba(26, 26, 26, 1);
  --editor-color-text: rgba(204, 204, 204, 1);
  --editor-color-mdtag: rgba(122, 122, 120, 1);
  --editor-color-underline: rgba(84, 84, 82, 1);
  --editor-color-brown: rgba(192, 148, 86, 1);
  --editor-color-red: rgba(216, 133, 107, 1);
  --editor-color-pink: rgba(186, 142, 177, 1);
  --editor-color-blue: rgba(124, 159, 192, 1);
  --editor-color-green: rgba(131, 165, 115, 1);
  --editor-color-codeblock-background: rgba(37, 37, 37, 1);
  --editor-color-selectedtext-background: rgba(20, 68, 84, 1);
  --editor-color-heading: #cccccc; /* Default to text color, overridden by JS */

  /* Future use */
  --editor-color-highlight-background: rgba(68, 59, 15, 1);
  --editor-color-highlight-underline: rgba(214, 176, 0, 1);
  --editor-color-highlight-text: rgba(220, 206, 157, 1);
}

/* Typography Variables */
:root {
  /* Font Family */
  --editor-font-family:
    'iA Writer Duo Variable', 'iA Writer Duo', -apple-system, 'Segoe UI',
    'Roboto', sans-serif;
  --editor-font-family-italic:
    'iA Writer Duo Variable Italic', 'iA Writer Duo', -apple-system, 'Segoe UI',
    'Roboto', sans-serif;

  /* Base Font Weight */
  --editor-font-weight-normal: 490;
  --editor-font-weight-bold: 700;

  /* Type Scale - Easy to experiment with */

  --editor-type-scale-tiny: 16.5px;
  --editor-type-scale-small: 18px;
  --editor-type-scale-medium: 18px;
  --editor-type-scale-large: 21px;
  --editor-type-scale-huge: 24px;

  /* Responsive Typography - Tiny Width (default) */
  --editor-font-size: var(--editor-type-scale-tiny);
  --editor-line-height: 1.609; /* 17.7px ÷ 11px */
  --editor-letter-spacing: letter-spacing: 0.07em;
  /* --editor-font-variation-settings: 'spcg' 1; */
  --editor-content-max-width: none;
}

/* Responsive Typography Breakpoints using regular media queries for now */
/* Since container queries may not be fully supported in current WebKit */

@media (min-width: 440px) {
  /* Small Width */
  .editor-view {
    --editor-font-size: var(--editor-type-scale-small);
    --editor-line-height: 1.742; /* 20.9px ÷ 12px */
    /* --editor-font-variation-settings: 'spcg' 14; */
  }
}

@media (min-width: 875px) {
  /* Medium Width */
  .editor-view {
    --editor-font-size: var(--editor-type-scale-medium);
    --editor-line-height: 1.742; /* 20.9px ÷ 12px */
    /* --editor-font-variation-settings: 'spcg' 14; */
    --editor-content-max-width: 705px;
  }
}

@media (min-width: 1250px) {
  /* Large Width */
  .editor-view {
    --editor-font-size: var(--editor-type-scale-large);
    --editor-line-height: 1.721; /* 24.1px ÷ 14px */
    /* --editor-font-variation-settings: 'spcg' 3; */
    --editor-content-max-width: 800px;
  }
}

@media (min-width: 1660px) {
  /* Huge Width */
  .editor-view {
    --editor-font-size: var(--editor-type-scale-huge);
    --editor-line-height: 1.7916; /* 43px ÷ 24px */
    /* --editor-font-variation-settings: 'spcg' 20; */
    --editor-content-max-width: 980px;
  }
}
