/* dar-code-block.css */

.dar-code-block {
  background: var(--dar-code-bg);
  border: 1px solid var(--dar-code-border);
  border-radius: var(--dar-radius-lg);
  overflow: hidden;
  margin: var(--dar-space-md) 0;
  font-family: var(--dar-font-mono);
  font-size: var(--dar-text-mono);
  line-height: var(--dar-lh-code);
  text-align: left;
  width: 100%;
}

.dar-code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px var(--dar-space-md);
  background: var(--dar-code-header-bg);
  border-bottom: 1px solid var(--dar-code-border);
}

.dar-code-dots {
  display: flex;
  gap: 6px;
}

.dar-code-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  opacity: 0.8;
}

.dar-code-dot--red { background: var(--dar-dot-error, #ff5f56); }
.dar-code-dot--yellow { background: var(--dar-dot-warning, #ffbd2e); }
.dar-code-dot--green { background: var(--dar-dot-success, #27c93f); }

.dar-code-filename {
  color: var(--dar-text-secondary);
  font-size: var(--dar-code-filename-size);
  letter-spacing: 0.02em;
}

.dar-code-copy-btn {
  background: transparent;
  border: 1px solid var(--dar-code-border);
  color: var(--dar-text-secondary);
  padding: 4px 10px;
  border-radius: var(--dar-radius-sm);
  font-size: var(--dar-code-copy-btn-size);
  font-family: var(--dar-font-mono);
  cursor: pointer;
  transition: var(--dar-transition-fast);
}

.dar-code-copy-btn:hover {
  background: rgba(34, 211, 238, 0.1);
  border-color: rgba(34, 211, 238, 0.3);
  color: var(--dar-accent-cyan);
}

.dar-code-body {
  padding: var(--dar-space-md) 0;
  overflow-x: auto;
}

.dar-code-line {
  display: flex;
  padding: 0 var(--dar-space-md);
  min-height: calc(var(--dar-text-mono) * var(--dar-lh-code));
  justify-content: flex-start !important;
  align-items: flex-start !important;
  text-align: left;
}

.dar-code-line--highlight {
  background: var(--dar-code-line-highlight);
  border-left: 2px solid var(--dar-accent-cyan);
  padding-left: calc(var(--dar-space-md) - 2px);
}

.dar-code-line__number {
  color: var(--dar-code-line-number);
  user-select: none;
  text-align: right;
  min-width: 32px;
  margin-right: var(--dar-space-md);
  flex-shrink: 0;
}

.dar-code-line__content {
  white-space: pre-wrap !important;
  word-break: break-word;
  color: var(--dar-syn-default);
  text-align: left !important;
  flex: 1;
}

body.single-example .dar-code-line,
body.single-example .dar-code-line__content {
  text-align: left !important;
  justify-content: flex-start !important;
}

/* Переопределение стандартных цветов highlight.js */
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-title,
.hljs-section,
.hljs-doctag {
  color: var(--dar-syn-keyword) !important;
}

.hljs-function,
.hljs-attr {
  color: var(--dar-syn-function) !important;
}

.hljs-string,
.hljs-attribute,
.hljs-addition {
  color: var(--dar-syn-string) !important;
}

.hljs-number,
.hljs-literal-number {
  color: var(--dar-syn-number) !important;
}

.hljs-comment,
.hljs-quote {
  color: var(--dar-syn-comment) !important;
  font-style: italic;
}

.hljs-class .hljs-title,
.hljs-type {
  color: var(--dar-syn-class) !important;
}

.hljs-operator,
.hljs-punctuation {
  color: var(--dar-syn-operator) !important;
}

.hljs-built_in,
.hljs-builtin-name {
  color: var(--dar-syn-special) !important;
}