.milkdown {
  height: 100%;
  background: var(--background-color-1);

  .editor {
    height: 100%;
  }
  .ProseMirror{
    padding-bottom: 200px;
  }
  p {
    font-family: var(--crepe-font-default)!important;
  }

  .milkdown-code-block .cm-editor span {
    font-family: var(--crepe-font-code);
  }
}



.milkdown-block-handle {
  top: -100px;
  position: fixed;
}

.milkdown {
  @headers: h1,
  h2,
  h3,
  h4,
  h5,
  h6;

  each(@headers, {
      @{value} {
        position: relative;

        &::before {
          content: "@{value}"; // 输出  h1 、 h2  等
          position: absolute;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          right:calc(100% + 2px);
          top: 50%;
          transform: translateY(-50%);
          height: 14px;
          color: var(--text-color-2);
          padding: 2px 4px;
          font-size: 10px;
          border: 1px solid var(--border-color);
          border-radius: 4px;
          opacity: 0
        }

        &:hover::before {
          opacity: 1;
          transition: opacity 0.2s ease-in-out;
        }
      }
    }

  );
}

.ProseMirror-focused.ProseMirror .prosemirror-virtual-cursor {
  --prosemirror-virtual-cursor-color: #73777f;
  border-left: 2px solid var(--prosemirror-virtual-cursor-color);
  animation: prosemirror-virtual-cursor-blink 1s linear infinite;
  animation-delay: 0.1s;
  transform: translateX(1px);
}

@keyframes prosemirror-virtual-cursor-blink {

  0%,
  100% {
    opacity: 1 !important;
  }

  50% {
    opacity: 0;
  }
}

.html-block {
  padding: 2px 0;
  display: inline-block;

  div[align="center"] {
    margin: 0 auto;
  }

  &:has(*[align="center"]),
  &:has(center),
  &:has(.html-source) {
    display: block;
  }

  div:empty {
    min-height: 24px;

    &::after {
      content: '<div></div>';
      color: var(--text-color-4) !important;
      font-size: 12px;
      padding: 0 4px;
    }
  }

  p:empty {
    min-height: 24px;

    &::after {
      content: '<p></p>';
      color: var(--text-color-4) !important;
      font-size: 12px;
      padding: 0 4px;
    }
  }

  center:empty {
    min-height: 24px;

    &::after {
      content: '<center></center>';
      color: var(--text-color-4) !important;
      font-size: 12px;
      padding: 0 4px;
    }
  }

  span:empty {
    min-height: 24px;

    &::after {
      content: '<span></span>';
      color: var(--text-color-4) !important;
      font-size: 12px;
      padding: 0 4px;
    }
  }
}

.html-source {
  color: var(--text-color-3);
  background: var(--background-color-2);
  padding: 2px 4px;
  border-radius: 4px;

  &::selection {
    background: var(--selected-background-color-1) !important;
    color: var(--selected-color-1) !important;
  }
}

.html-rendered {
  &:hover {
    background: var(--hover-background-color);
  }
}