@use 'slate-angular/styles/index.scss';

.slate-editable-container {
  span {
    word-break: break-all;
  }

  /* MARKDOWN RULES */
  .slate-bold {
    font-weight: bold;
  }

  .slate-italics {
    font-style: italic;
  }

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

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

  .slate-link {
    text-decoration: underline;
    color: #4caf50;
  }

  .slate-inline-code {
    padding: 2px 4px;
    border-radius: 2px;
    background-color: rgba(0, 0, 0, 0.2);
  }

  .slate-quotes {
    font-style: italic;
    margin: 6px 0;
  }

  .slate-token {
    color: #5bb3ff;
  }

  .slate-fragment {
    color: gray;
  }

  .slate-codeblock {
    color: red;
  }

  /* HLJS TOKENS */
  .slate-comment {
    color: red;
  }

  .slate-variable-language {
    color: blue;
  }

  .slate-string {
    color: yellow;
  }

  .slate-keyword {
    color: brown;
  }

  .slate-number {
    color: palevioletred;
  }
}

app-slate-emoji {
  margin: 0 2px;
  img {
    width: 20px;
    height: 20px;
    margin-left: -20px;
    pointer-events: none;
  }

  span {
    width: 20px;
    height: 20px;
    overflow: hidden;
    text-align: center;
    line-height: 20px;
    display: inline-block;
  }
}

.slate-editable-container {
  padding: 4px;
  font-size: 14px;
  min-height: 25px;

  p {
    margin: 2px 0;
  }
}
