/* 
 * This file has been added to "angular.json > styles" array.
 * Since, it was not getting imported directly in the "fullscreeen.plugin.ts"
 * using "import '../theme/fullscreen.css'"
 */

.ck-editor {
  transition: opacity 0.5s !important;
}

.ck-editor.ck-plugin-full-screen {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1020;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  transition: none !important;
}

.ck-editor.ck-plugin-full-screen .ck-editor__top,
.ck-editor.ck-plugin-full-screen .ck-editor__main {
  width: 100%;
  max-width: calc(100% - 60px);
  margin-inline: auto;
  /* max-width: 1000px; */
}

.ck-editor.ck-plugin-full-screen .ck-editor__top {
  /* margin-top: 2em; */
  margin-top: 5em; /* increased due to top navigation bar */
}

.ck-editor.ck-plugin-full-screen .ck-editor__main {
  /* Fill the rest of the height of the parent */
  flex-grow: 1;
  overflow-y: hidden;
  margin-bottom: 2em;
}

/* Make source view also cover the whole viewport */
.ck-editor.ck-plugin-full-screen .ck-source-editing-area {
  height: 100%;
}

.ck-editor.ck-plugin-full-screen .ck-source-editing-area textarea {
  overflow-y: scroll;
}