open-learning-exchange/planet

@import '../../variables';

@mixin editor-border-color($color) {
  border-top-color: $color;
  border-left-color: $color;
  border-right-color: $color;
  border-bottom-color: $color;
}

.mat-form-field-invalid planet-markdown-textbox {
  .editor-toolbar, .CodeMirror {
    @include editor-border-color($warn);
  }
}

.mat-focused.ng-valid planet-markdown-textbox, .mat-focused.ng-untouched planet-markdown-textbox {
  .editor-toolbar, .CodeMirror {
    @include editor-border-color($primary);
  }
}

planet-markdown-textbox {
  .CodeMirror, .CodeMirror-scroll {
    height: inherit;
    min-height: 15vh !important;
    max-height: 15vh;
  }

  .CodeMirror.CodeMirror-fullscreen {
    box-sizing: border-box;
  }

  .CodeMirror.CodeMirror-fullscreen, .CodeMirror-fullscreen .CodeMirror-scroll {
    height: 100%;
    max-height: 100%;
  }

  .editor-statusbar {
    margin-bottom: -2.75em;
  }

  .editor-preview, .editor-preview-side {
    img {
      width: 100%;
      max-width: 40vw;
    }
  }
}