@import url(~codemirror/lib/codemirror.css);
@import url(~codemirror/theme/dracula.css);

$codemirror-selector: '.CodeMirror' !default;

#{$codemirror-selector} {
  color: white;
  border: $sui-size-border solid rgba(0, 0, 0, .15);
  background-color: $sui-color-brand-denim-700;
  font-size: 1rem;
  font-family: $sui-font-family-code;
  border-radius: $sui-border-radius-md;
  padding: $sui-space-xxs;

  &-gutters {
    border-right: none;
    padding-right: $sui-space-xs;
    background-color: $sui-color-brand-denim-700;
  }

  &-linenumber {
    opacity: .4;
    color: inherit;
    transform: scale(.8);
  }

  &-cursor {
    border-color: white;
  }

  &-selected {
    background: lighten($sui-color-brand-denim-700, 20%);
  }
}

#{$codemirror-selector}--readOnly {
  #{$codemirror-selector} {
    color: $sui-color-text;
    background-color: $sui-color-brand-denim-300;

    &-gutters {
      background-color: $sui-color-brand-denim-300;
    }

    &-selected {
      background: $sui-color-brand-denim-400;
    }

    &-cursors {
      visibility: hidden !important;
    }
  }
}

#{$codemirror-selector}--heightAuto {
  #{$codemirror-selector} {
    height: auto;
  }
}

#{$codemirror-selector}--heightSmall {
  #{$codemirror-selector} {
    height: $sui-size-md;
  }
}
