:root {
  --md-text-code: #c9def1;
  --md-link: #38bdf8;
  --md-link-hover: #6366f1;
  --md-c-info-b: #475569;
  --md-c-waring-b: #d97706;
  --md-c-tip-b: #047857;
  --md-c-danger-b: #dc2626;
  --md-bg-alt: #101010;
  --md-pure: black;
  --shadow: rgba(0, 0, 0, 0.3);
  --md-high-line: rgba(11, 18, 24, 0.5);
}

body {
  text-rendering: optimizeLegibility;
  direction: ltr;
}
.font-system {
  font-family:
    -apple-system,
    system-ui,
    ui-sans-serif,
    BlinkMacSystemFont,
    Segoe UI,
    Roboto,
    Helvetica Neue,
    Arial,
    Noto Sans,
    sans-serif,
    Apple Color Emoji,
    Segoe UI Emoji,
    Segoe UI Symbol,
    Noto Color Emoji;
}
.font-lucida {
  font-family: 'lucida grande', 'lucida sans unicode', lucida;
}
.font-helvetica {
  font-family: 'Helvetica Neue';
}
.font-hiragino-sans-gb {
  font-family: 'Hiragino Sans GB';
}
.font-heiti-sc {
  font-family: 'Heiti SC';
}
.font-times-new-roman {
  font-family: 'Times New Roman';
}
.font-pingfang-sc {
  font-family: 'PingFang SC';
}
.font-microsoft-yahei {
  font-family: 'Microsoft Yahei';
}
.font-tahoma {
  font-family: Tahoma;
}
.font-simsun {
  font-family: SimSun;
}
.font-arial {
  font-family: Arial;
}
.font-verdana {
  font-family: Verdana;
}
a {
  text-decoration: none;
}
.edit-area {
  padding-bottom: 360px;
  hyphens: auto;
  min-height: calc(100vh - 180px);
  outline: none !important;
}
body.webview {
  .edit-area {
    padding-bottom: 50px;
  }
}

.mini {
  @apply border-b dark:border-gray-200/10 border-gray-200;
  .page-title {
    font-size: 1em;
    @apply border-none;
  }
}
.page-title {
  font-size: 2em;
  @apply w-full flex-1 relative break-words py-1 bg-transparent outline-none font-bold placeholder-gray-400 dark:placeholder-gray-300/30 border-b dark:border-gray-200/10 border-gray-200;

  &:empty {
    &:before {
      position: absolute;
      left: 0;
      top: 0.25rem;
      display: block;
      @apply text-gray-400 dark:text-gray-300/30 cursor-text;
      content: 'Untitled';
    }
  }
}
.safari {
  .edit-area {
    .m-list-item > p:first-child {
      display: inline-block;
      width: 100%;
    }
  }
}
.dragging {
  cursor: grabbing !important;
  .edit-area {
    cursor: grabbing !important;
    user-select: none;
  }
  .drag-handle {
    display: none !important;
  }
}
[data-be='head'] {
  scroll-margin: 16px;
}
.dark {
  .edit-area.focus [data-empty]:before {
    @apply text-gray-300/50;
  }
}
.edit-area {
  &.focus {
    [data-empty] {
      &:before {
        position: absolute;
        left: 0;
        top: 3px;
        display: block;
        @apply text-gray-400 cursor-text;
        content: "Press '/' for quick actions";
      }
    }
    [data-be='list-item'] > :first-child[data-empty] {
      &:before {
        cursor: text;
        content: 'Enter content';
      }
    }
    [data-be='list-item'].task > :nth-child(2)[data-empty] {
      &:before {
        cursor: text;
        content: 'Enter content';
      }
    }
    h1[data-empty]::before {
      cursor: text;
      content: 'Heading 1';
    }
    h2[data-empty]::before {
      cursor: text;
      content: 'Heading 2';
    }
    h3[data-empty]::before {
      cursor: text;
      content: 'Heading 3';
    }
    h4[data-empty]::before {
      cursor: text;
      content: 'Heading 4';
    }
    h5[data-empty]::before {
      cursor: text;
      content: 'Heading 5';
    }
  }
  [data-empty] {
    &:before {
      display: none;
    }
  }
}

.edit-area {
  > :first-child {
    margin-top: 0;
  }
}

.book-icon-uploader .ant-upload.ant-upload-select {
  width: 60px !important;
  height: 60px !important;
  font-size: 13px;
}
.pure-modal {
  .ant-modal-content {
    padding: 0;
  }
  .ant-modal-close {
    top: 15px;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.pdf {
  .m-table table {
    max-width: 100%;
    td,
    th {
      min-width: auto !important;
      max-width: auto !important;
    }
  }
}
.content {
  color: var(--md-text);
  outline: none;
  tab-size: 4;
  caret-color: var(--md-text);
  overflow: hidden;
  position: relative;
  line-height: 1.53;
  white-space: normal;
  .link {
    text-decoration: underline;
    &.detail::before {
      content: attr(data-url);
      position: absolute;
      left: 0;
      top: -100%;
    }
  }
  &.line-height-compact {
    line-height: 1.3;
    .check-item {
      height: 1.55em;
    }
    .drag-handle {
      top: calc(3px + (0.5em * 1.3) - 11px);
    }
    h1,
    h2,
    h3,
    h4,
    h5 {
      line-height: 1.2;
      .drag-handle {
        top: calc(3px + (0.5em * 1.2) - 11px) !important;
      }
    }
  }
  &.line-height-loose {
    line-height: 1.7;
    .check-item {
      height: 2.1em;
    }
    .drag-handle {
      top: calc(3px + (0.5em * 1.7) - 11px);
    }
    h1,
    h2,
    h3,
    h4,
    h5 {
      line-height: 1.4;
      .drag-handle {
        top: calc(3px + (0.5em * 1.4) - 11px) !important;
      }
    }
  }
  .attach {
    padding: 3px 0;
    &:not(:last-child) {
      margin-bottom: 0.3em;
    }
    .file {
      @apply py-2 px-3 rounded-lg border border-gray-200 bg-gray-50 duration-100 dark:bg-white/5 dark:border-white/10;
      &.active {
        @apply border-black/50 dark:border-white/50;
      }
    }
  }
  .mermaid-container {
    @apply mb-3 cursor-default select-none py-3 bg-gray-500/5 rounded flex justify-center;
  }
  [data-fnc='fnc'] {
    font-size: 0.85em;
    @apply dark:text-teal-500 align-super px-0.5 dark:hover:text-teal-600 duration-200 text-teal-600 hover:text-teal-500;
  }
  [data-fnd='fnd'] {
    @apply dark:text-lime-500 px-0.5 dark:hover:text-lime-600 duration-200 text-lime-600 hover:text-lime-500;
  }
  pre {
    margin: 0;
    overflow-x: auto;
  }
  .high-text {
    border-radius: 1px;
    background: var(--md-high);
  }
  table,
  th,
  td {
    border-width: 1px;
    border-style: solid;
    border-collapse: collapse;
    @apply border-gray-300/80 dark:border-gray-300/20;
  }

  table {
    /* width: 100%; */
    position: relative;
    font-size: 0.9em;
  }
  .m-table {
    margin-bottom: 0.2em;
    position: relative;
    > .tb {
      padding: 3px 0 15px 0;
      position: relative;
    }
    th,
    td {
      position: relative;
      .col-move {
        position: absolute;
        right: -2px;
        width: 4px;
        height: 100%;
        top: 0;
        z-index: 10;
        cursor: col-resize;
      }
    }
  }
  .col-move-mark {
    height: calc(100% - 18px);
    top: 3px;
    @apply absolute w-1.5 cursor-col-resize flex justify-center pointer-events-none;
    &::before {
      content: '';
      display: block;
      width: 2px;
      @apply bg-blue-500;
    }
  }
  .t-more {
    position: absolute;
    right: 1px;
    height: 12px;
    width: 20px;
    top: 12px;
    z-index: 20;
    user-select: none;
    @apply text-xs items-center justify-center text-black/50 cursor-pointer rounded duration-100 hover:text-black/80 dark:text-white/50 dark:hover:text-white/80 rotate-90;
  }
  .fs-right,
  .fs-left {
    position: absolute;
    height: calc(100% - 18px);
    width: 6px;
    top: 3px;
    z-index: 10;
    pointer-events: none;
    transition-duration: 200ms;
  }
  .fs-right {
    right: 0;
    @apply bg-gradient-to-r from-black/0 to-black/10 dark:from-black/0 dark:to-black/20;
  }
  .fs-left {
    left: 0;
    @apply bg-gradient-to-l from-black/0 to-black/10 dark:from-black/0 dark:to-black/20;
  }
  th,
  td {
    vertical-align: top;
    padding: 0.375em 1em 0.375em 0.75em;
    text-align: left;
    line-height: 1.7;
  }

  th {
    @apply dark:bg-zinc-400/5 bg-gray-200/30;
  }

  p {
    padding: 3px 0;
    &:not(:last-child) {
      margin-bottom: 0.3em;
    }
  }
  h1,
  h2,
  h3,
  h4,
  h5 {
    position: relative;
    line-height: 1.3;
    padding: 3px 0;
    margin-bottom: 3px;
    .drag-handle {
      top: calc(3px + (0.5em * 1.3) - 11px) !important;
    }
  }
  h1 {
    font-size: 1.875em;
    margin-top: 1.2em;
    font-weight: 700;
    &:first-child {
      margin-top: 0;
    }
  }

  h2 {
    font-weight: 600;
    font-size: 1.5em;
    margin-top: 1em;
  }
  h3 {
    font-weight: 600;
    font-size: 1.4em;
    margin-top: 0.8em;
  }

  h4 {
    font-weight: 500;
    font-size: 1.3em;
    margin-top: 0.7em;
    line-height: 1.2;
  }
  a {
    font-weight: 500;
  }
}

.inline-code {
  background: var(--md-bg-mute);
  font-size: 0.85em;
  border-radius: 4px;
  padding: 2px 5px;
  margin: 0 1px;
  position: relative;
  word-break: break-word;
  top: -0.5px;
  @apply dark:text-orange-400/80 text-teal-600;
}

.t-handle {
  @apply w-5 h-5 cursor-pointer duration-200 dark:hover:bg-gray-300/20 hover:bg-gray-300/40 rounded-sm flex items-center justify-center;
}

.text-link-icon {
  margin-left: 1px;
  margin-right: 1px;
  display: inline;
  &.external {
    @apply text-sky-500;
  }
  &.inner {
    @apply text-teal-500;
  }
}

.hide-link-icon {
  .text-link-icon {
    display: none;
  }
}

blockquote {
  padding: 3px 14px 3px 21px;
  position: relative;
  font-style: italic;
  font-size: 0.96em;
  @apply dark:text-gray-300 text-gray-600;
  &:not(:last-child) {
    margin-bottom: 0.5em;
  }
  &:not(:first-child) {
    margin-top: 0.2em;
  }
  p {
    &:not(:last-child) {
      margin-bottom: 0.2em !important;
    }
  }
  &:before {
    content: '';
    left: 0;
    top: 5px;
    height: calc(100% - 10px);
    width: 4px;
    @apply block absolute dark:bg-gray-400 bg-gray-500 rounded;
  }
}
[data-be]:last-child {
  margin-bottom: 0;
}
[data-be='list'] {
  margin-bottom: 0.3em;
  padding-top: 5px;
  padding-bottom: 5px;
}
.m-list {
  list-style: disc;
  padding-left: 24px;
  padding-top: 3px;
  padding-bottom: 3px;
  margin-bottom: 0;
  li::marker {
    @apply text-gray-500;
  }
  p {
    margin-bottom: 0 !important;
  }
  &[data-task] {
    list-style: none !important;
    padding-left: 0;
  }
  li:not(.task) {
    > :first-child {
      .drag-handle {
        padding-left: 2px;
        padding-right: 18px;
        left: -44px !important;
      }
    }
  }
  li.task > :nth-child(2) {
    .drag-handle {
      padding-left: 2px;
      padding-right: 10px;
      left: -50px !important;
    }
  }
}

ol.m-list {
  list-style: decimal;
}

.m-list-item {
  position: relative;
  &.task {
    padding-left: 24px;
  }
  > [data-be='list'] {
    margin-bottom: 0;
  }
  .check-item {
    display: flex;
    align-items: center;
    position: absolute;
    user-select: none;
    height: 1.87em;
    left: 0;
    top: 0;
    z-index: 10;
  }
}
.katex-container {
  .newline {
    margin: 4px 0;
  }
}
.m-hr {
  height: 1px;
  margin: 2em 0;
  border: none;
  @apply dark:bg-gray-200/10 bg-gray-200;
}

[data-be] {
  position: relative;
}
.move-mark {
  @apply h-0.5 dark:bg-white/50 bg-black/50 left-0 z-10 block absolute rounded top-0 duration-200;
}

.drag-handle {
  @apply absolute opacity-0 flex items-center select-none text-blue-500;
  padding-left: 2px;
  padding-right: 6px;
  left: -24px;
  height: 22px;
  top: calc(3px + (0.5em * 1.5) - 11px);
}
.drag-icon {
  @apply w-4 h-4 dark:text-gray-500 dark:hover:text-gray-300 text-gray-400 hover:text-gray-500 cursor-grab;
}
.drag-el:hover {
  > .drag-handle {
    opacity: 1;
  }
}
.inline-code-input {
  line-height: 1.3em;
  @apply rounded-sm dark:text-orange-400/80 text-teal-600;
  &:before,
  &:after {
    content: '$';
    font-size: 1em;
    @apply dark:text-gray-400 text-gray-500;
  }
  &:before {
    margin-right: 2px;
  }
  &:after {
    margin-left: 2px;
  }
}
.katex-display {
  margin: 0 !important;
}
.view {
  .drag-handle {
    display: none;
  }
  [data-be='link'] {
    pointer-events: none;
  }
}
.media-frame {
  @apply relative border-2 border-transparent block;
  .img-drag-handle {
    display: none;
    position: absolute;
    cursor: col-resize;
    border-radius: 100%;
    width: 9px;
    height: 9px;
    background: var(--bg);
    @apply border border-gray-500 dark:border-gray-400;
    &.t1 {
      left: -5px;
      top: 50%;
      margin-top: -5px;
    }
    &.t2 {
      right: -5px;
      top: 50%;
      margin-top: -5px;
    }
  }
  &.active {
    @apply border-blue-500/60;
    .img-drag-handle {
      display: inline-block;
    }
  }
}

.dark .win {
  ::-webkit-scrollbar-thumb {
    background-color: #52525b;
  }
}
.win {
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  ::-webkit-scrollbar-thumb {
    background-color: #a1a1aa;
    border-radius: 20px;
  }
}

ol.m-list {
  list-style: decimal;
  ol.m-list {
    list-style: lower-alpha;
    ol.m-list {
      list-style: upper-roman;
      ol.m-list {
        list-style: decimal;
      }
    }
  }
}

ul.m-list {
  list-style: disc;
  ul.m-list {
    list-style: circle;
    ul.m-list {
      list-style: revert;
      ul.m-list {
        list-style: disc;
      }
    }
  }
}
.float-bar {
  @apply z-20 dark:text-gray-300 h-8 rounded text-[13px] dark:bg-zinc-800 bg-white text-gray-500 absolute;
}

.wiki-link {
  margin: 0 1px;
  @apply cursor-default;
  @apply text-blue-500;
  &.selected {
    &:before {
      content: '[[';
      @apply text-black/60;
    }
    &:after {
      content: ']]';
      @apply text-black/60;
    }
  }
}

.dark .wiki-link {
  &.selected {
    &:before {
      content: '[[';
      @apply text-white/60;
    }
    &:after {
      content: ']]';
      @apply text-white/60;
    }
  }
}
