.editor-bold {
  font-weight: 700;
}

.editor-italic {
  font-style: italic;
}

.editor-underline {
  text-decoration: underline;
}

.editor-strikethrough {
  text-decoration: line-through;
}

.editor-h1 {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
}

.editor-h2 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
}

.editor-h3 {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
}

.editor-h4 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
}

.editor-placeholder {
  font-size: 16px;
  position: absolute;
  top: 30px;
  left: 13px;
  color: var(--brand-main);
  opacity: 0.5;
}

.editor-document-placeholder {
  font-size: 20px;
  line-height: 26px;
  position: absolute;
  top: 30px;
  left: 13px;
  color: var(--brand-main);
  opacity: 0.5;
}

.editor-document-title-placeholder {
  font-size: 36px;
  line-height: 36px;
  color: var(--brand-main);
  opacity: 0.5;
  text-transform: none;
}

.editor-document-subtitle-placeholder {
  font-size: 24px;
  line-height: 24px;
  color: var(--brand-main);
  opacity: 0.5;
  text-transform: none;
}

.editor-recommendation-placeholder {
  font-size: 20px;
  position: absolute;
  top: 0;
  left: 0;
  padding-top: 2px;
  color: var(--brand-main);
  opacity: 0.5;
}

.editor-rec-title-placeholder {
  font-size: 20px;
  position: absolute;
  top: 4px;
  left: 2px;
  text-transform: uppercase;
  color: var(--brand-main);
  opacity: 0.5;
}

@media (min-width: 768px) {
  .editor-rec-title-placeholder {
    font-size: 36px;
    top: 10px;
    left: 2px;
  }
}

.editor-rec-title-paragraph {
  color: var(--brand-main);
  font-size: 20px;
  text-transform: uppercase;
}

@media (min-width: 768px) {
  .editor-rec-title-paragraph {
    font-size: 36px;
  }
}

.editor-paragraph {
  color: var(--brand-main);
  font-size: 18px;
}

.editor-document-paragraph {
  color: var(--brand-main);
  font-size: 20px;
  font-weight: normal;
  line-height: 26px;
}

.editor-document-title-paragraph {
  color: var(--brand-main);
  font-size: 36px;
  line-height: 36px;
  text-transform: none;
}

.editor-document-subtitle-paragraph {
  color: var(--brand-main);
  font-size: 24px;
  line-height: 24px;
  text-transform: none;
}

.editor-recommendation-paragraph {
  color: var(--brand-main);
  font-size: 20px;
}

.editor-rec-slim-inline-title-placeholder {
  font-size: 20px;
  position: absolute;
  top: 4px;
  left: 2px;
  color: var(--brand-main);
  opacity: 0.5;
}

@media (min-width: 768px) {
  .editor-rec-slim-inline-title-placeholder {
    font-size: 24px;
    top: 4px;
    left: 2px;
  }
}

.editor-rec-slim-inline-title-paragraph {
  color: var(--brand-main);
  font-size: 20px;
}

@media (min-width: 768px) {
  .editor-rec-slim-inline-title-paragraph {
    font-size: 24px;
  }
}

.editor-rec-slim-inline-body-placeholder {
  font-size: 20px;
  position: absolute;
  top: 0;
  left: 2px;
  padding-top: 2px;
  color: var(--brand-main);
  opacity: 0.5;
}

@media (min-width: 768px) {
  .editor-rec-slim-inline-body-placeholder {
    font-size: 20px;
  }
}

.editor-rec-slim-inline-body-paragraph {
  color: var(--brand-main);
  font-size: 20px;
}

@media (min-width: 768px) {
  .editor-rec-slim-inline-body-paragraph {
    font-size: 20px;
  }
}

.editor-link {
  color: var(--brand-main) !important;
  border-bottom: 1px dashed var(--brand-main);
  text-decoration: none !important;
}

.editor-link:hover {
  cursor: pointer;
  color: var(--theme-highlight) !important;
  text-decoration: none;
  border-bottom: 1px dashed var(--theme-highlight);
}

.content-editable {
  caret-color: var(--brand-main);
}

.editor-hashtag {
  color: var(--brand-highlight) !important;
}

.mention {
  color: var(--brand-highlight) !important;
  display: inline-block;
}

/* List styles */
.editor-list-ul {
  list-style-type: disc;
  margin: 8px 0;
  padding-left: 24px;
}

.editor-list-ol {
  list-style-type: decimal;
  margin: 8px 0;
  padding-left: 24px;
}

.editor-listitem {
  margin: 4px 0;
  color: var(--brand-main);
}

.editor-nested-listitem {
  list-style-type: none;
}

.editor-list-ul .editor-list-ul {
  list-style-type: circle;
}

.editor-list-ul .editor-list-ul .editor-list-ul {
  list-style-type: square;
}