/* Shared line-number gutters for examples and the language-page editors. */
pre.code-numbered,
pre.code-numbered > code {
  white-space: normal;
}

pre.code-numbered > code {
  display: block;
}

.code-numbered .code-line {
  display: grid;
  grid-template-columns: calc(var(--code-number-width) + 12px) minmax(0, 1fr);
  column-gap: 12px;
}

.code-numbered .code-line-content {
  white-space: pre;
}

.code-numbered.code-wrap .code-line-content {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.code-line-number {
  color: var(--text-muted, var(--text-3, #71717c));
  border-right: 1px solid var(--border);
  padding-right: 12px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}

.code-line-number::before {
  content: attr(data-line-number);
}

.numbered-editor {
  position: relative;
  --code-editor-gutter-width: calc(var(--code-number-width) + 24px);
}

.numbered-editor > .code-input {
  display: block;
  padding-left: calc(var(--code-editor-padding-left) + var(--code-editor-gutter-width));
}

.code-editor-gutter {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--code-editor-gutter-width);
  overflow: hidden;
  border-right: 1px solid var(--border);
  background: var(--bg-code);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.code-editor-gutter .code-line-number {
  display: block;
  border-right: 0;
}