:host {
  display: block;
}

.code-editor {
  position: relative;
  border: 1px solid var(--border-color, #d3dad9);
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
}

.code-editor--invalid {
  border-color: var(--error-color, #991b1b);
}

.code-editor--focused {
  border-color: var(--primary-color, #497671);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color, #497671) 15%, transparent);
}

.code-editor-highlight,
.code-editor-input {
  margin: 0;
  padding: var(--space-sm, 0.5rem) var(--space-sm, 0.75rem);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--font-size-sm, 0.8125rem);
  line-height: var(--line-height-normal, 1.5);
  white-space: pre;
  overflow: auto;
}

.code-editor-highlight {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: var(--text-primary, #1e3c38);
  background: #fbfcfc;
}

.code-editor-input {
  position: relative;
  width: 100%;
  border: 0;
  resize: vertical;
  background: transparent;
  color: transparent;
  caret-color: var(--text-primary, #1e3c38);
}

.code-editor-input::selection {
  background: rgba(73, 118, 113, 0.25);
}

:global(.cm-comment) {
  color: #7f8c8d;
  font-style: italic;
}

:global(.cm-string) {
  color: #2f7d5e;
}

:global(.cm-tag) {
  color: #6d3fa8;
}

:global(.cm-selector) {
  color: #b2452f;
  font-weight: var(--font-weight-semibold, 600);
}

:global(.cm-property) {
  color: #1f6f8b;
}

:global(.cm-value) {
  color: #1e3c38;
}

:global(.cm-keyword) {
  color: #6d3fa8;
  font-weight: var(--font-weight-semibold, 600);
}

:global(.cm-punct) {
  color: var(--text-secondary, #5f6e6a);
}
