/* stylelint-disable unit-blacklist, declaration-no-important, selector-pseudo-class-no-unknown, selector-class-pattern */

:global {
  .CodeMirror {
    direction: ltr;
    position: relative;
    overflow: hidden;
    background: var(--background);
    height: auto;
    font-family: var(--fontFamily);
    font-size: var(--fontSize);
    border-radius: var(--borderRadius);
    border: var(--border);
    color: var(--color);
    line-height: 1.4375;
    min-height: 1.4375rem;
    margin-bottom: 1rem;
  }

  /* PADDING */

  .CodeMirror-lines {
    padding: var(--verticalPadding) 0;
    cursor: text;
    min-height: 0.0625rem;
  }

  /* stylelint-disable-next-line selector-max-type */
  .CodeMirror pre {
    padding: 0 var(--horizontalPadding);
    border-radius: 0;
    border-width: 0;
    background: transparent;
    font-family: inherit;
    font-size: inherit;
    margin: 0;
    white-space: pre;
    word-wrap: normal;
    line-height: inherit;
    color: inherit;
    z-index: calc(var(--zIndex) + 3);
    position: relative;
    overflow: visible;
    -webkit-tap-highlight-color: transparent;
    font-variant-ligatures: contextual;
  }

  .CodeMirror-scrollbar-filler,
  .CodeMirror-gutter-filler {
    background: var(--background);
  }

  /* CURSOR */

  .CodeMirror-cursor {
    border-left: 0.0625rem solid var(--cursorColor); /* stylelint-disable-line property-blacklist */
    border-right: none; /* stylelint-disable-line property-blacklist */
    width: 0;
    position: absolute;
    pointer-events: none;
  }

  .CodeMirror-cursors {
    visibility: hidden;
    position: relative;
    z-index: calc(var(--zIndex) + 4);
  }

  .CodeMirror-dragcursors {
    visibility: visible;
  }

  .CodeMirror-focused .CodeMirror-cursors {
    visibility: visible;
  }

  .CodeMirror-crosshair {
    cursor: crosshair;
  }

  .cm-fat-cursor .CodeMirror-cursor {
    width: auto;
    border: 0 !important;
    background: var(--fatCursorBackground);
  }

  .cm-fat-cursor .CodeMirror-cursors {
    z-index: calc(var(--zIndex) + 2);
  }

  .CodeMirror .CodeMirror-secondarycursor {
    border-left: 0.0625rem solid var(--secondaryCursorColor); /* stylelint-disable-line property-blacklist */
  }

  .cm-fat-cursor-mark {
    background: var(--fatCursorMarkBackground);
    animation: blink 1.06s steps(1) infinite;
  }

  .cm-animate-fat-cursor {
    width: auto;
    border: 0;
    animation: blink 1.06s steps(1) infinite;
    background-color: var(--fatCursorBackground);
  }

  @keyframes blink {
    0% {}
    50% { background-color: transparent; }
    100% {}
  }

  .cm-tab {
    display: inline-block;
    text-decoration: inherit;
  }

  .CodeMirror-rulers {
    position: absolute;
    left: 0; /* stylelint-disable-line property-blacklist */
    right: 0; /* stylelint-disable-line property-blacklist */
    top: -50px;
    bottom: -20px;
    overflow: hidden;
  }

  .CodeMirror-ruler {
    border-left: 0.0625rem solid var(--rulerColor); /* stylelint-disable-line property-blacklist */
    top: 0;
    bottom: 0;
    position: absolute;
  }

  /* stylelint-disable-next-line selector-max-type */
  div.CodeMirror span.CodeMirror-matchingbracket {
    outline: 0.0625rem solid var(--matchingBracketOutline);
  }

  /* stylelint-disable-next-line selector-max-type */
  div.CodeMirror span.CodeMirror-nonmatchingbracket {
    color: var(--nonMatchingBracketColor);
  }

  .CodeMirror-matchingtag {
    background: var(--matchingTagBackground);
  }

  /* stylelint-disable-next-line selector-max-type */
  div.CodeMirror-activeline-background {
    background: var(--activeLineBackground);
  }

  .CodeMirror-scroll {
    overflow: scroll !important;
    margin-bottom: -30px;
    margin-right: -30px; /* stylelint-disable-line property-blacklist */
    padding-bottom: 30px;
    height: 100%;
    outline: none;
    position: relative;
  }

  .CodeMirror-sizer {
    position: relative;
    border-right: 30px solid transparent; /* stylelint-disable-line property-blacklist */
  }

  .CodeMirror-vscrollbar,
  .CodeMirror-hscrollbar,
  .CodeMirror-scrollbar-filler,
  .CodeMirror-gutter-filler {
    position: absolute;
    z-index: calc(var(--zIndex) + 7);
    display: none;
  }

  .CodeMirror-vscrollbar {
    right: 0; /* stylelint-disable-line property-blacklist */
    top: 0;
    overflow-x: hidden;
    overflow-y: scroll;
  }

  .CodeMirror-hscrollbar {
    bottom: 0;
    left: 0; /* stylelint-disable-line property-blacklist */
    overflow-y: hidden;
    overflow-x: scroll;
  }

  .CodeMirror-scrollbar-filler {
    right: 0; /* stylelint-disable-line property-blacklist */
    bottom: 0;
  }

  .CodeMirror-gutter-filler {
    left: 0; /* stylelint-disable-line property-blacklist */
    bottom: 0;
  }

  /* GUTTER */

  .CodeMirror-gutters {
    border-top-left-radius: var(--borderRadius); /* stylelint-disable-line property-blacklist */
    border-bottom-left-radius: var(--borderRadius); /* stylelint-disable-line property-blacklist */
    border-right: 0.0625rem solid var(--gutterBorder); /* stylelint-disable-line property-blacklist */
    overflow: hidden;
    background: var(--gutterBackground);
    white-space: nowrap;
    position: absolute;
    left: 0; /* stylelint-disable-line property-blacklist */
    top: 0;
    min-height: 100%;
    z-index: calc(var(--zIndex) + 4);
  }

  .CodeMirror-linenumber {
    padding: 0 0.1875rem 0 0.3125rem;
    min-width: 1.25rem;
    text-align: right; /* stylelint-disable-line declaration-property-value-blacklist */
    color: var(--lineNumberColor);
    white-space: nowrap;
  }

  .CodeMirror-guttermarker {
    color: var(--gutterMarkerColor);
  }

  .CodeMirror-guttermarker-subtle {
    color: var(--gutterMarkerSubtleColor);
  }

  .CodeMirror-gutter {
    white-space: normal;
    height: 100%;
    display: inline-block;
    vertical-align: top;
    margin-bottom: -30px;
  }

  .CodeMirror-gutter-wrapper {
    position: absolute;
    z-index: calc(var(--zIndex) + 5);
    background: none !important;
    border: none !important;
  }

  .CodeMirror-gutter-background {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: calc(var(--zIndex) + 5);
  }

  .CodeMirror-gutter-elt {
    position: absolute;
    cursor: default;
    z-index: calc(var(--zIndex) + 5);
  }

  .CodeMirror-gutter-wrapper ::selection {
    background-color: transparent;
  }

  /* stylelint-disable-next-line selector-max-type */
  .CodeMirror-wrap pre {
    word-wrap: break-word;
    white-space: pre-wrap;
    word-break: normal;
  }

  .CodeMirror-linebackground {
    position: absolute;
    left: 0; /* stylelint-disable-line property-blacklist */
    right: 0; /* stylelint-disable-line property-blacklist */
    top: 0;
    bottom: 0;
    z-index: calc(var(--zIndex) + 1);
  }

  .CodeMirror-linewidget {
    position: relative;
    z-index: calc(var(--zIndex) + 3);
    padding: 0.1px;
  }

  /* stylelint-disable-next-line selector-max-type */
  .CodeMirror-rtl pre {
    direction: rtl;
  }

  .CodeMirror-code {
    outline: none;
  }

  .CodeMirror-scroll,
  .CodeMirror-sizer,
  .CodeMirror-gutter,
  .CodeMirror-gutters,
  .CodeMirror-linenumber {
    box-sizing: content-box;
  }

  .CodeMirror-measure {
    position: absolute;
    width: 100%;
    height: 0;
    overflow: hidden;
    visibility: hidden;
  }

  /* stylelint-disable-next-line selector-max-type */
  .CodeMirror-measure pre {
    position: static;
  }

  /* stylelint-disable-next-line selector-max-type */
  .CodeMirror-selected,
  .CodeMirror-focused .CodeMirror-selected,
  .CodeMirror-line::selection,
  .CodeMirror-line > span::selection,
  .CodeMirror-line > span > span::selection {
    background: var(--selectedBackground);
  }

  .cm-searching {
    background: var(--searchingBackground);
  }

  .cm-force-border {
    padding-right: 0.1px; /* stylelint-disable-line property-blacklist */
  }

  @media print {
    .CodeMirror .CodeMirror-cursors {
      visibility: hidden;
    }
  }

  .cm-tab-wrap-hack::after {
    content: "";
  }

  .CodeMirror-selectedtext {
    background: none;
  }

  .CodeMirror-focused {
    box-shadow: var(--focusBoxShadow);
    border-color: var(--focusBorderColor);
  }

  /* THEME */

  .cm-keyword {
    color: var(--keywordColor);
    font-weight: bold;
  }

  .cm-atom {
    color: var(--atomColor);
  }

  .cm-number {
    color: var(--numberColor);
  }

  .cm-def {
    color: var(--defColor);
  }

  /* stylelint-disable-next-line selector-max-type */
  span.cm-variable-2,
  span.cm-tag {
    color: var(--tagColor);
  }

  /* stylelint-disable-next-line selector-max-type */
  span.cm-variable-3,
  span.cm-def,
  span.cm-type {
    color: var(--typeColor);
  }

  .cm-variable {
    color: var(--variableColor);
  }

  .cm-property {
    color: var(--propertyColor);
  }

  .cm-qualifier {
    color: var(--qualifierColor);
  }

  .cm-operator {
    color: var(--operatorColor);
  }

  .cm-comment {
    color: var(--commentColor);
    font-weight: normal;
  }

  .cm-string {
    color: var(--stringColor);
    font-style: italic;
  }

  .cm-string-2 {
    color: var(--secondaryStringColor);
  }

  .cm-meta {
    color: var(--metaColor);
  }

  .cm-builtin {
    color: var(--builtInColor);
  }

  .cm-tag {
    color: var(--tagColor);
  }

  .cm-attribute {
    color: var(--attributeColor);
  }

  .cm-header {
    color: var(--headerColor);
  }

  .cm-hr {
    color: var(--hrColor);
  }

  .cm-link {
    color: var(--linkColor);
    font-style: italic;
    text-decoration: none;
  }

  .cm-error {}
}

.attached--top {
  :global .CodeMirror {
    border-bottom-left-radius: 0; /* stylelint-disable-line property-blacklist */
    border-bottom-right-radius: 0; /* stylelint-disable-line property-blacklist */
    margin-top: 0.25rem;
  }
}

.attached--bottom {
  :global .CodeMirror {
    border-top-left-radius: 0; /* stylelint-disable-line property-blacklist */
    border-top-right-radius: 0; /* stylelint-disable-line property-blacklist */
    margin-bottom: 0.25rem;
  }
}

/* stylelint-enable unit-blacklist, declaration-no-important, selector-pseudo-class-no-unknown, selector-class-pattern */