.code-block-view {
  width: 100%;
  max-width: 100%;
  align-self: stretch;
  flex-shrink: 0;
  box-sizing: border-box;
  margin: 0;
  border: var(--border-width-base) solid var(--border-color-subtle);
  border-radius: var(--border-radius-base);
  overflow: hidden;
  background-color: var(--fill);
}

.code-block-view .code-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-8);
  padding: var(--spacing-16);
  background-color: var(--background-color-neutral-subtle);
  border-bottom: var(--border-width-base) solid var(--border-color-subtle);
}

.code-block-view .code-block-lang {
  font-family: var(--typography-font-mono);
  font-size: var(--font-size-medium-16);
  line-height: var(--line-height-small-22);
  font-weight: var(--font-weight-semi-bold);
  color: var(--color-subtle);
  text-transform: lowercase;
  letter-spacing: 0.5px;
  user-select: none;
}

.code-block-view .code-block-copy {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: calc(((var(--spacing-8) * 2) + var(--line-height-small-22)) + (var(--border-width-base) * 2));
  height: calc(((var(--spacing-8) * 2) + var(--line-height-small-22)) + (var(--border-width-base) * 2));
  padding: 0;
  box-sizing: border-box;
  background-color: transparent;
  border: var(--border-width-base) solid var(--border-color-base);
  border-radius: var(--border-radius-base);
  cursor: pointer;
  color: var(--color-subtle);
  transition: color 200ms ease, background-color 200ms ease;
}

.code-block-view .code-block-copy .copy-icon, .code-block-view .code-block-copy .success-icon {
  display: flex;
  align-items: center;
  pointer-events: none;
}

.code-block-view .code-block-copy .success-icon {
  display: none;
}

.code-block-view .code-block-copy.is-copied .copy-icon {
  display: none !important;
}

.code-block-view .code-block-copy.is-copied .success-icon {
  display: flex !important;
}

.code-block-view .code-block-copy:hover {
  background-color: var(--background-color-interactive-subtle-hover) !important;
  color: var(--color-base) !important;
}

.code-block-view pre {
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  padding: var(--spacing-16) !important;
  background-color: transparent !important;
  max-width: 100%;
  overflow: visible;
}

.code-block-view pre code {
  display: block;
  background-color: transparent !important;
  padding: 0 !important;
  border-radius: 0;
  border: none;
  font-family: var(--typography-font-mono);
  font-size: var(--font-size-medium-16);
  line-height: var(--line-height-small-22);
  color: var(--color-syntax-plain-text);
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
  tab-size: 4;
}

.code-block-view .hljs-keyword, .code-block-view .hljs-selector-tag {
  color: var(--color-syntax-keywords) !important;
}

.code-block-view .hljs-string, .code-block-view .hljs-doctag, .code-block-view .hljs-regexp, .code-block-view .hljs-meta .hljs-string {
  color: var(--color-syntax-strings) !important;
}

.code-block-view .hljs-subst {
  color: var(--color-syntax-plain-text) !important;
}

.code-block-view .hljs-comment, .code-block-view .hljs-quote {
  color: var(--color-syntax-comments) !important;
  font-style: italic;
}

.code-block-view .hljs-number, .code-block-view .hljs-literal {
  color: var(--color-syntax-numbers) !important;
}

.code-block-view .hljs-type, .code-block-view .hljs-built_in {
  color: var(--color-syntax-type-declarations) !important;
}

.code-block-view .hljs-attr, .code-block-view .hljs-attribute {
  color: var(--color-syntax-attributes) !important;
}

.code-block-view .hljs-title.class_ {
  color: var(--color-syntax-project-class-names) !important;
}

.code-block-view .hljs-title.function_ {
  color: var(--color-syntax-project-function-and-method-names) !important;
}

.code-block-view .hljs-params {
  color: var(--color-syntax-param-internal-name) !important;
}

.code-block-view .hljs-meta {
  color: var(--color-syntax-project-preprocessor-macros) !important;
}

.code-block-view .hljs-tag {
  color: var(--color-syntax-plain-text) !important;
}

.code-block-view .hljs-name {
  color: var(--color-syntax-keywords) !important;
}

.code-block-view .hljs-punctuation {
  color: var(--color-syntax-plain-text) !important;
}

.code-block-view .hljs-addition {
  color: var(--color-syntax-addition) !important;
}

.code-block-view .hljs-deletion {
  color: var(--color-syntax-deletion) !important;
}

.code-block-view .hljs-section, .code-block-view .hljs-bullet {
  color: var(--color-syntax-heading) !important;
}

.code-block-view .hljs-link, .code-block-view .hljs-symbol, .code-block-view .hljs-bullet {
  color: var(--color-syntax-urls) !important;
}