@import (reference) "../../../style/variables.less";
@import (reference) "../../../style/font-awesome.less";
@import (reference) "../../../style/mixins.less";

.html-editor {
  @min-height: 500px; // make sure we have enough space to click after editor
  @font-size: 16px;
  @code-font-size: 14px;
  width: 100%;
  position: relative; // for popper

  .placeholder {
    position: absolute;
    font-style: italic;
  }

  .link-popper {
    background: var(--contextual-menu-bg);
    border: var(--contextual-menu-border);
    border-radius: 5px;
    margin: 5px;

    &:not([data-popper-placement]) {
      // hide until it's properly positioned
      visibility: hidden;
      pointer-events: none;
    }

    ul {
      .make-list();
      padding: 5px;

      li {
        .make-list-item();
        display: inline-block;

        a {
          color: var(--contextual-menu-fg);
          padding: 10px;
          width: 25px;
          height: 25px;
          text-decoration: none;

          span.edit {
            .icon-font-awesome("pencil");
          }
          span.open {
            .icon-font-awesome("external-link");
          }
          span.remove {
            .icon-font-awesome("times");
          }

          font-size: 1.1em;
        }
      }
    }
  }

  .bangle-editor {
    border: none;
    min-height: @min-height;

    &:focus {
      // remove dotted border when focused
      outline: 0px solid transparent;
      a {
        cursor: text;
      }
    }

    a {
      cursor: pointer;
      &,
      &:active,
      &:hover {
        color: #4299e1;
      }
    }
    a[href^="entity:"] {
      color: black;
      background-color: #cbcfda;
      text-decoration: none;
      padding: 3px;
      border-radius: 3px;

      .icon-font-awesome("link", "  ");
    }

    p {
      font-family: Segoe UI, Arial, Helvetica, sans-serif;
      font-size: @font-size;
    }

    h1 {
      font-size: 2.2rem;
    }
    h2 {
      font-size: 2rem;
    }
    h3 {
      font-size: 1.8rem;
    }
    h4 {
      font-size: 1.6rem;
    }

    h1,
    h2,
    h3,
    h4 {
      font-weight: 750;
      margin: 1.25rem 0;
    }

    pre,
    code,
    blockquote {
      background-color: #f5f5f5;
      color: #000;
    }

    pre,
    code {
      font-family: Consolas, Liberation Mono, Menlo, monospace;
      font-size: @code-font-size;
    }
    code {
      text-decoration: none;
      padding: 3px;
    }
  }
}

:root[data-theme="theme-dark"] {
  .html-editor {
    .bangle-editor {
      pre,
      code,
      blockquote {
        background-color: #2d2d2d;
        color: #fff;
      }
    }
  }
}
