/* 
These styles were copied from the network tab to get the default ckeditor styles (contents.css)
.cke_editable and .cke_panel_container are added as parents to the original ckeditor selectors because 
the css file is now app scoped to make it available to consumers.
These class names were chosen because they are already natural parents in ckeditor.
The style sheet is set on the editor by adding contentsCss: '/ckeditor/styles/content.css' to the config prop.
To use these styles when consuming ckeditor content use the ReadonlyField component with the dangerouslySetInnerHTML prop or
add cke_editor as a class to box component with dangerouslySetInnerHTML. e.g.

<ReadOnlyField
  dangerouslySetInnerHTML
  value={ckEditorContent}
/>

OR

<Box
    className='cke_editable'
    sx={{ m: 0 }}
    dangerouslySetInnerHTML={{
    __html: ckEditorContent,
    }}
/>

Note: There are some Onboarding overrides at the end of this file.
*/

.cke_editable,
.cke_panel_container body {
  /* Font */
  /* Emoji fonts are added to visualise them nicely in Internet Explorer. */
  font-family: '-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell',
    '"Helvetica Neue"', 'Arial', 'sans-serif', '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"';
  font-size: 12px;

  /* Text color */
  color: #333;

  /* Remove the background color to make it transparent. */
  background-color: #fff;

  margin: 20px;
}

.cke_editable {
  font-size: 13px;
  line-height: 1.6;

  /* Fix for missing scrollbars with RTL texts. (#10488) */
  word-wrap: break-word;
}

.cke_editable blockquote {
  font-style: italic;
  font-family: Georgia, Times, 'Times New Roman', serif;
  padding: 2px 0;
  border-style: solid;
  border-color: #ccc;
  border-width: 0;
}

.cke_contents_ltr blockquote {
  padding-left: 20px;
  padding-right: 8px;
  border-left-width: 5px;
}

.cke_contents_rtl blockquote {
  padding-left: 8px;
  padding-right: 20px;
  border-right-width: 5px;
}

.cke_editable a {
  color: #0782c1;
}

.cke_editable ol,
ul,
dl {
  /* IE7: reset rtl list margin. (#7334) */
  *margin-right: 0px;
  /* Preserved spaces for list items with text direction different than the list. (#6249,#8049)*/
  padding: 0 40px;
}

.cke_editable h1,
h2,
h3,
h4,
h5,
h6,
.cke_panel_container h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
  line-height: 1.2;
}

.cke_editable hr {
  border: 0px;
  border-top: 1px solid #ccc;
}

img.right {
  border: 1px solid #ccc;
  float: right;
  margin-left: 15px;
  padding: 5px;
}

img.left {
  border: 1px solid #ccc;
  float: left;
  margin-right: 15px;
  padding: 5px;
}

.cke_editable pre {
  white-space: pre-wrap; /* CSS 2.1 */
  word-wrap: break-word; /* IE7 */
  -moz-tab-size: 4;
  tab-size: 4;
}

.marker {
  background-color: Yellow;
}

.cke_editable span[lang] {
  font-style: italic;
}

.cke_editable figure {
  text-align: center;
  outline: solid 1px #ccc;
  background: rgba(0, 0, 0, 0.05);
  padding: 10px;
  margin: 10px 20px;
  display: inline-block;
}

.cke_editable figure > figcaption {
  text-align: center;
  display: block; /* For IE8 */
}

.cke_editable a > img {
  padding: 1px;
  margin: 1px;
  border: none;
  outline: 1px solid #0782c1;
}

/* Widget Styles */
.code-featured {
  border: 5px solid red;
}

.math-featured {
  padding: 20px;
  box-shadow: 0 0 2px rgba(200, 0, 0, 1);
  background-color: rgba(255, 0, 0, 0.05);
  margin: 10px;
}

.image-clean {
  border: 0;
  background: none;
  padding: 0;
}

.image-clean > figcaption {
  font-size: 0.9em;
  text-align: right;
}

.image-grayscale {
  background-color: white;
  color: #666;
}

.image-grayscale img,
img.image-grayscale {
  filter: grayscale(100%);
}

.embed-240p {
  max-width: 426px;
  max-height: 240px;
  margin: 0 auto;
}

.embed-360p {
  max-width: 640px;
  max-height: 360px;
  margin: 0 auto;
}

.embed-480p {
  max-width: 854px;
  max-height: 480px;
  margin: 0 auto;
}

.embed-720p {
  max-width: 1280px;
  max-height: 720px;
  margin: 0 auto;
}

.embed-1080p {
  max-width: 1920px;
  max-height: 1080px;
  margin: 0 auto;
}

/* Onboarding Overrides*/

.cke_editable {
  word-break: break-word;
  font-size: 16px;
  line-height: 1.5rem;
}

/* Consumed content doesn't have the .cke_contents_ltr and .cke_contents_rtl classes needed for the default styles
   to work, so we use inline attributes to get the same effect.
 */
.cke_editable blockquote {
  border-inline-start-width: 5px;
  padding-inline-start: 20px;
  padding-inline-end: 8px;
}