/* Line-based editor styles */
.editor-viewport {
  font-family: var(--editor-font-family);
  background-color: var(--color-background);
}

.editor-line-wrapper {
  /* Avoid speculative transform promotion to keep pixel alignment stable */
}

.editor-line {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  white-space: pre;
}

.editor-line.selected {
  background-color: var(--color-selection, rgba(100, 149, 237, 0.2));
}

.editor-line-content {
  display: inline-block;
  min-width: 100%;
}

/* Line Gutter */
.editor-gutter {
  background-color: transparent;
  color: var(--color-gutter-text, rgba(128, 128, 128, 0.6));
  text-align: right;
  padding-right: 8px;
  padding-left: 8px;
  user-select: none;
  height: 100%;
}

.editor-gutter .line-number {
  font-size: 0.9em;
}

.editor-gutter.has-breakpoint {
  background-color: rgba(255, 0, 0, 0.1);
}

.editor-gutter.has-error {
  background-color: rgba(255, 0, 0, 0.2);
}

.editor-gutter.has-warning {
  background-color: rgba(255, 165, 0, 0.2);
}

.gutter-decoration {
  margin-left: 4px;
  pointer-events: auto;
}

/* Git gutter indicators */
.git-gutter-added {
  background-color: #28a745;
  transition: opacity 0.2s;
}

.git-gutter-added:hover {
  opacity: 0.8;
}

.git-gutter-modified {
  background-color: #007bff;
  transition: opacity 0.2s;
}

.git-gutter-modified:hover {
  opacity: 0.8;
}

.git-gutter-deleted {
  background-color: #dc3545;
  transition: opacity 0.2s;
}

.git-gutter-deleted:hover {
  opacity: 0.8;
}

/* Virtual scrolling optimization */
.editor-content {
  contain: layout;
}

.editor-line-content-wrapper {
  contain: layout style;
}

/* Cursor styles */
.editor-cursor {
  animation: blink 1s step-end infinite;
}

.editor-cursor.moving {
  animation: none;
}

@keyframes blink {
  0%,
  50% {
    opacity: 1;
  }
  51%,
  100% {
    opacity: 0;
  }
}

/* Selection styles */
.selection {
  background-color: var(--color-selection, rgba(100, 149, 237, 0.3));
  position: absolute;
  pointer-events: none;
}

/* Layer system styles */
.editor-layers {
  position: relative;
  width: 100%;
  height: 100%;
}

.editor-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.editor-layer-overlay {
  pointer-events: none;
}

.editor-layer-overlay .editor-overlay-item {
  pointer-events: auto;
}

/* Decoration styles */
.editor-decoration {
  position: absolute;
  pointer-events: none;
}

.editor-decoration-inline.selection {
  background-color: var(--color-selection, rgba(100, 149, 237, 0.3));
}

.editor-decoration-inline.search-highlight {
  background-color: rgba(100, 149, 237, 0.3);
  border-bottom: 2px solid rgba(100, 149, 237, 0.8);
}

.editor-decoration-line {
  background-color: var(--color-line-highlight, rgba(128, 128, 128, 0.1));
}

/* Test extension styles */
.editor-decoration-inline.test-highlight {
  background-color: rgba(255, 255, 0, 0.3);
  border-bottom: 2px solid rgba(255, 255, 0, 0.8);
}

.editor-decoration-line.test-line-highlight {
  background-color: rgba(0, 255, 0, 0.1);
  border-left: 3px solid rgba(0, 255, 0, 0.5);
}

/* Syntax highlighting token styles for decoration overlays */
.editor-decoration-inline.token-keyword {
  background-color: rgba(0, 0, 255, 0.15);
}

.editor-decoration-inline.token-string {
  background-color: rgba(0, 128, 0, 0.15);
}

.editor-decoration-inline.token-number {
  background-color: rgba(9, 134, 88, 0.15);
}

.editor-decoration-inline.token-comment {
  background-color: rgba(112, 128, 144, 0.15);
}

.editor-decoration-inline.token-function {
  background-color: rgba(121, 94, 38, 0.15);
}

.editor-decoration-inline.token-variable {
  background-color: rgba(0, 16, 128, 0.15);
}

.editor-decoration-inline.token-operator {
  background-color: rgba(0, 0, 0, 0.08);
}

.editor-decoration-inline.token-punctuation {
  background-color: rgba(0, 0, 0, 0.05);
}

.editor-decoration-inline.token-type {
  background-color: rgba(38, 127, 153, 0.15);
}

.editor-decoration-inline.token-class {
  background-color: rgba(38, 127, 153, 0.2);
}

/* Syntax highlighting token styles for text spans */
.token-keyword {
  color: #0000ff;
  font-weight: bold;
}

.token-string {
  color: #008000;
}

.token-number {
  color: #098658;
}

.token-comment {
  color: #708090;
  font-style: italic;
}

.token-function {
  color: #795e26;
}

.token-variable {
  color: #001080;
}

.token-operator {
  color: #000000;
}

.token-punctuation {
  color: #000000;
}

.token-type {
  color: #267f99;
}

.token-class {
  color: #267f99;
  font-weight: bold;
}

/* Hide native selected style on textarea */
.selection-transparent::selection {
  background: transparent !important;
  color: inherit !important;
}

.selection-transparent::-moz-selection {
  background: transparent !important;
  color: inherit !important;
}

textarea.selection-transparent::selection {
  background: transparent !important;
  color: inherit !important;
}

textarea.selection-transparent::-moz-selection {
  background: transparent !important;
  color: inherit !important;
}
