@import './czi-heading.css';
@import './czi-indent.css';
@import './czi-list.css';
@import './czi-table.css';
@import './czi-vars.css';

.czi-text-selection {
  /* var(--czi-selection-highlight-color-dark); */
  background: red;
}

.ProseMirror-focused {
  outline: none;
}

.ProseMirror {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  position: relative;
  user-zoom: fixed;
  border-radius: 1px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  box-sizing: border-box;
  margin: 0 auto 0 auto;
  outline: none;
  z-index: 1;
  background: var(--czi-content-body-background-color);
  color: var(--czi-content-font-color);
  font-family: var(--czi-content-font-family);
  font-size: var(--czi-content-font-size);
  line-height: var(--czi-content-line-height);
}

.ProseMirror nobr {
  hyphens: none;
  white-space: nowrap;
}

.ProseMirror .tableWrapper {
  overflow-x: visible;
}

.ProseMirror.czi-has-placeholder {
  min-height: 100px;
}

.prosemirror-editor-wrapper {
  position: relative;
}

.czi-editor-content-placeholder {
  box-sizing: border-box;
  color: var(--czi-placeholder-text-color);
  font-family: var(--czi-content-font-family);
  font-size: var(--czi-content-font-size);
  left: 0;
  line-height: var(--czi-content-line-height);
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 999;
}

.ProseMirror.czi-prosemirror-editor,
.ProseMirror[data-layout='us_letter_portrait'] {
  min-height: 279mm;
  padding: var(--czi-doc-padding-default);
  width: var(--czi-doc-width-us-letter-portrait);
}

.ProseMirror[data-layout='us_letter_landscape'] {
  min-height: 216mm;
  padding: var(--czi-doc-padding-default);
  width: var(--czi-doc-width-us-letter-landscape);
}

.ProseMirror[data-layout='desktop_screen_4_3'] {
  min-height: 90vh;
  padding: var(--czi-doc-padding-default);
  width: var(--czi-doc-width-us-desktop-screen-4-3);
}

.ProseMirror[data-layout='desktop_screen_16_9'] {
  min-height: 80vh;
  padding: var(--czi-doc-padding-default);
  width: var(--czi-doc-width-us-desktop-screen-16-9);
}

.prosemirror-editor-wrapper.embedded .ProseMirror {
  background: unset;
  border-radius: unset;
  box-shadow: unset;
  min-height: unset;
  padding: unset;
  width: unset;
}

@media only print {
  .ProseMirror.ProseMirror[class] {
    border-radius: unset;
    box-shadow: unset;
    max-width: 100vw;
    min-height: unset;
  }
}

/* Content Styles *************************************************************/

.ProseMirror p {
  line-height: var(--czi-content-line-height);
  margin: 0;
}

.ProseMirror a:link,
.ProseMirror a:visited,
.ProseMirror a:hover,
.ProseMirror a:active {
  color: var(--czi-content-link-color);
}

/* Blockquote */
.ProseMirror blockquote {
  background-color: var(--czi-blockquote-background-color);
  border-left: var(--czi-blockquote-border);
  border-radius: 1px;
  color: var(--czi-blockquote-color);
  font-family: var(--czi-blockquote-font-family);
  font-size: 1.4em;
  font-style: italic;
  line-height: 1.6;
  margin: 50px auto;
  padding: 1.2em 10% 1.2em 10%;
  position: relative;
}

/* CodeBlock */
.ProseMirror pre > code {
  background-color: #eee;
  border: 1px solid #999;
  display: block;
  padding: 20px;
}

/* Spacer */
.ProseMirror span[data-spacer-size] {
  display: inline-block;
  letter-spacing: 12px;
}

.ProseMirror span[data-spacer-size='tab'] {
  /* Google doc uses 50px as exact size for tab space. */

  /* The `letter-spacing` used here is actually the width of the spacer */

  /* Note that the actual rendered width will be 50px + width of the space */

  /* character. */
  letter-spacing: 50px;
}

.ProseMirror span[data-spacer-size='tab-large'] {
  /* Google doc uses 50px as exact size for tab space. */

  /* The `letter-spacing` used here is actually the width of the spacer */

  /* Note that the actual rendered width will be 50px + width of the space */

  /* character. */
  letter-spacing: 280px;
}

.ProseMirror hr[data-page-break] {
  height: 0;
  margin: 0;
  page-break-before: always;
  visibility: hidden;
}

.ProseMirror .czi-font-size-mark {
  line-height: var(--czi-content-line-height);
}
