/* THIS FILE IS AUTO-GENERATED. DO NOT EDIT BY HAND! */
:root {
  /* Callouts */
  --callout-gray-background-color: #F2F3F7;
  --callout-gray-border-color: #D0D5DD;
  --callout-gray-text-color: #344054;

  --callout-blue-background-color: #D1E9FF;
  --callout-blue-border-color: #84CAFF;
  --callout-blue-text-color: #2b6fe6;

  --callout-green-background-color: #D1F2D7;
  --callout-green-border-color: #84E1A9;
  --callout-green-text-color: #0F8B3D;

  --callout-yellow-background-color: #FFF9D1;
  --callout-yellow-border-color: #FFE084;
  --callout-yellow-text-color: #a38310;

  --callout-red-background-color: #fedada;
  --callout-red-border-color: #ff8484;
  --callout-red-text-color: #B30000;

  --rte-table-border-color: #e2e8f0;
  --rte-link-color: #2b6fe6;
}

.dark {
  --callout-gray-background-color: #2d3748;
  --callout-gray-border-color: #4a5568;
  --callout-gray-text-color: #e2e8f0;

  --callout-blue-background-color: #2b6cb0;
  --callout-blue-border-color: #2b6cb0;
  --callout-blue-text-color: #e2e8f0;

  --callout-green-background-color: #2f855a;
  --callout-green-border-color: #2f855a;
  --callout-green-text-color: #e2e8f0;

  --callout-yellow-background-color: #b7791f;
  --callout-yellow-border-color: #b7791f;
  --callout-yellow-text-color: #e2e8f0;

  --callout-red-background-color: #9b2c2c;
  --callout-red-border-color: #9b2c2c;
  --callout-red-text-color: #e2e8f0;
}

.dark richer-text-editor {
  --callout-gray-background-color: #2d3748;
  --callout-gray-border-color: #4a5568;
  --callout-gray-text-color: #e2e8f0;

  --callout-blue-background-color: #2b6cb0;
  --callout-blue-border-color: #2b6cb0;
  --callout-blue-text-color: #e2e8f0;

  --callout-green-background-color: #2f855a;
  --callout-green-border-color: #2f855a;
  --callout-green-text-color: #e2e8f0;

  --callout-yellow-background-color: #b7791f;
  --callout-yellow-border-color: #b7791f;
  --callout-yellow-text-color: #e2e8f0;

  --callout-red-background-color: #9b2c2c;
  --callout-red-border-color: #9b2c2c;
  --callout-red-text-color: #e2e8f0;

  --rte-table-border-color: #2d3748;
  --rte-link-color: #e6342b;

  /* Editor wrapper */
  --border-color: #374151;
  --background-color: #171717;
  --text-color: #f5f5f5;

  /* Editor toolbar */
  --toolbar-button-background: #0a0a0a;
  --toolbar-button-background-active: #171717;
  --toolbar-button-background-hover: #262626;
  --toolbar-button-fill: #f5f5f5;
  --toolbar-button-fill-active: #f5f5f5;
  --toolbar-button-fill-hover: #f5f5f5;
  --toolbar-divider-color: #4b5563;
  --toolbar-background: #0a0a0a;
}

richer-text-editor a {
  color: var(--rte-link-color);
}

.ProseMirror {
  padding: 0.5rem;
}

.callout {
  border-radius: 0.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-bottom: 0.5rem;
  border-width: 1px;
  word-break: break-word;
}

.callout-select {
  position: relative;
  top: 10px;
  right: 5px;
}

.callout p {
  color: inherit !important;
}

.callout strong {
  color: inherit !important;
}

.callout[data-color='gray'] {
  background-color: var(--callout-gray-background-color);
  border-color: var(--callout-gray-border-color);
  color: var(--callout-gray-text-color) !important;
}

.callout[data-color='blue'] {
  background-color: var(--callout-blue-background-color);
  border-color: var(--callout-blue-border-color);
  color: var(--callout-blue-text-color) !important;
}

.callout[data-color='green'] {
  background-color: var(--callout-green-background-color);
  border-color: var(--callout-green-border-color);
  color: var(--callout-green-text-color) !important;
}

.callout[data-color='yellow'] {
  background-color: var(--callout-yellow-background-color);
  border-color: var(--callout-yellow-border-color);
  color: var(--callout-yellow-text-color) !important;
}

.callout[data-color='red'] {
  background-color: var(--callout-red-background-color);
  border-color: var(--callout-red-border-color);
  color: var(--callout-red-text-color) !important;
}

.callout p:first-child {
  margin-top: 0;
  margin-bottom: 0.2rem;
}

.callout p:last-child {
  margin-top: 0.2rem;
  margin-bottom: 0;
}

/* Basic editor styles */
.ProseMirror>*+* {
  margin-top: 0.75em;
}

.ProseMirror ul,
.ProseMirror ol {
  padding: 0 1rem;
}

.ProseMirror h1,
.ProseMirror h2,
.ProseMirror h3,
.ProseMirror h4,
.ProseMirror h5,
.ProseMirror h6 {
  line-height: 1.1;
}

.ProseMirror h1 {
  font-size: 1.65em;
}

.ProseMirror h2 {
  font-size: 1.5em;
}

.ProseMirror h3 {
  font-size: 1.25em;
}

.ProseMirror code {
  background-color: var(--rte-code-background-color);
  color: var(--rte-code-text-color);
}

.ProseMirror pre {
  background: #0d0d0d;
  color: #fff;
  font-family: 'JetBrainsMono', monospace;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
}

.ProseMirror pre code {
  color: inherit;
  padding: 0;
  background: none;
  font-size: 0.8rem;
}

.ProseMirror img {
  max-width: 100%;
  height: auto;
}

.ProseMirror blockquote {
  padding-left: 1rem;
  border-left: 2px solid rgba(13, 13, 13, 0.1);
}

.ProseMirror a {
  color: var(--rte-link-color);
  text-decoration: none;
  border-bottom: 1px solid var(--rte-link-color);
}

.ProseMirror hr {
  border: none;
  border-top: 2px solid rgba(13, 13, 13, 0.1);
  margin: 2rem 0;
}

.ProseMirror p.is-empty::before {
  color: var(--rte-placeholder-text-color);
  content: attr(data-placeholder);
  float: left;
  height: 0;
  pointer-events: none;
}

.ProseMirror table {
  border-collapse: collapse;
  margin: 0;
  overflow: hidden;
  table-layout: fixed;
  width: 100%;
}

.ProseMirror table td,
.ProseMirror table th {
  border: 2px solid var(--rte-table-border-color);
  box-sizing: border-box;
  min-width: 1em;
  padding: 3px 5px;
  position: relative;
  vertical-align: top;
}

.ProseMirror table td>*,
.ProseMirror table th>* {
  margin-bottom: 0;
}

.ProseMirror table th {
  background-color: var(--rte-table-header-background-color);
  font-weight: bold;
  text-align: left;
}

.ProseMirror table .selectedCell:after {
  background: var(--rte-table-selected-cell-background-color);
  content: "";
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.ProseMirror table .column-resize-handle {
  background-color: #adf;
  bottom: -2px;
  position: absolute;
  right: -2px;
  pointer-events: none;
  top: 0;
  width: 4px;
}

.ProseMirror table p {
  margin: 0;
}

.tableWrapper {
  padding: 1rem 0;
  overflow-x: auto;
}

.resize-cursor {
  cursor: ew-resize;
  cursor: col-resize;
}

.ProseMirror .richer-text--mention {
  background-color: #e2e8f0;
  border-radius: 0.25rem;
  padding: 0.1rem 0.25rem;
  color: #4a5568;

  align-items: center;
  gap: 0.25rem;
}

.ProseMirror .richer-text--mention-img {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 0.25rem;
  margin-right: 0.25rem;
}

/* Rendered out mentions */
.richer-text--mention {
  border-radius: 0.25rem;
  padding: 0.1rem 0.25rem;
  color: #4a5568;

  align-items: center;
  gap: 0.25rem;
}

.richer-text--mention-img {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 0.25rem;
  margin-right: 0.25rem;
}

.image-uploading {
  position: relative;
  display: inline-block;
}

.image-uploading img {
  filter: blur(5px);
  opacity: 0.3;
}

.image-uploading::before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  margin-left: -15px;
  border-radius: 50%;
  border: 3px solid #ccc;
  border-top-color: #1e986c;
  z-index: 1;
  animation: spinner 0.6s linear infinite;
}

@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}

.ProseMirror iframe {
  pointer-events: none;;
}

.richer-text iframe {
  display: inline-block !important;
  width: 100% !important;
  min-height: 500px !important;
}