/* cmf-ui/cmf-comment/angular/cmf-comment/macroses/wiki-codesample.scss */

/* Дублируем стили в комментарии */

#tinymce pre[class*='language-'],
.mce-content-body pre[class*='language-'],
#tinymce code[class*='language-'],
.mce-content-body code[class*='language-'] {
  font: var(--wiki-text-font);
  background-color: color-mix(in srgb, #f5f2f0 3%, var(--theme-hack-bg-color, #f5f2f0));
  color: var(--color-gray-222);
  text-shadow: none;
}

.mce-content-body code[class*='language-'] ::selection,
.mce-content-body code[class*='language-']::selection,
.mce-content-body pre[class*='language-'] ::selection,
.mce-content-body pre[class*='language-']::selection {
  background: color-mix(in srgb, #accef7 20%, var(--theme-hack-bg-color, #accef7));
}

.mce-content-body pre[class*='language-'] .language-css .token.string,
.mce-content-body pre[class*='language-'] .style .token.string,
.mce-content-body pre[class*='language-'] .token.entity,
.mce-content-body pre[class*='language-'] .token.operator,
.mce-content-body pre[class*='language-'] .token.url {
  background: none;
}

#tinymce pre.language-markup[contenteditable='false'] {
  cursor: pointer;
  transition: opacity 0.2s ease;
}

#tinymce pre.language-markup[contenteditable='false']:hover {
  opacity: 0.8;
}

.mce-content-readonly .code-sample-wrapper {
  position: relative;
  margin: 7px 0;
}

.mce-content-readonly .code-sample-wrapper pre[class*='language-'] {
  margin: 0;
}

.mce-content-readonly .code-sample-copy-button {
  position: absolute;
  top: 4px;
  right: 4px;
  visibility: hidden;
  border: none;
  padding: 0;
  background: none;
  outline: inherit;
  cursor: pointer;
  color: var(--color-gray-444);
}

.mce-content-readonly .code-sample-wrapper:hover .code-sample-copy-button {
  visibility: visible;
}

.mce-content-readonly .code-sample-copy-button svg {
  fill: currentColor;
  width: 24px;
  height: 24px;
}