body {
    /* 内部链接颜色 */
    --link-color: #5291e5;
    /* 鼠标经过当前行内部链接文字颜色 */
    --link-color-hover: var(--text-accent);
    /* 外部链接颜色 */
    --link-external-color: #ff9f31;
    /* 鼠标经过当前行外部链接文字颜色 */
    --link-external-color-hover: var(--text-accent);
    /* 脚注颜色 */
    --link-footnote: var(--color-purple);
    --link-decoration-hover: none;
    --link-external-decoration-hover: none;
    --animation: var(--anim-duration-fast) var(--anim-motion-smooth);
}

@property --link-offset {
    syntax: "<length>";
    inherits: false;
    initial-value: 4px;
}

@property --link-thickness {
    syntax: "<length>";
    inherits: false;
    initial-value: 2px;
}

 :is(a.external-link, .cm-link .cm-underline) {
    font-size: var(--font-text-size);
    text-underline-offset: var(--link-offset);
    color: var(--link-external-color) !important;
    -webkit-text-decoration-line: underline !important;
    text-decoration-line: underline !important;
    -webkit-text-decoration-skip-ink: none;
    text-decoration-skip-ink: none;
    -webkit-text-decoration-color: var(--link-external-color) !important;
    text-decoration-color: var(--link-external-color) !important;
    text-decoration-thickness: var(--link-thickness) !important;
    transition: --link-offset var(--animation), --link-thickness var(--animation), color var(--animation);
}

 :is(a.external-link, .cm-link .cm-underline):hover,
 :is(a.external-link, .cm-link .cm-underline):focus {
    color: var(--text-on-accent) !important;
    --link-offset: calc(var(--font-text-size) * -1 - var(--size-4-4));
    --link-thickness: calc(var(--font-text-size) + 10px);
}

.cm-hmd-footnote .cm-underline {
    color: var(--link-footnote) !important;
    font-size: var(--footnote-size);
    -webkit-text-decoration-color: var(--link-footnote) !important;
    text-decoration-color: var(--link-footnote) !important;
    pointer-events: none;
}

body:not(.click-to-edit-link-in-live-preview) :is(.markdown-preview-view a.external-link, .cm-link:not(.cm-hmd-footnote) .cm-underline)::before {
    content: "";
    display: inline-block;
    transform: translateY(var(--size-2-1));
    width: calc(var(--font-text-size) - var(--size-4-1));
    height: calc(var(--font-text-size) - var(--size-4-1));
    margin-right: var(--size-4-1);
    background-color: var(--link-external-color);
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-link"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>');
}

 :is(a.internal-link,
.cm-hmd-internal-link .cm-underline) {
    font-size: var(--font-text-size);
    text-underline-offset: var(--link-offset);
    color: var(--link-color) !important;
    -webkit-text-decoration-line: underline !important;
    text-decoration-line: underline !important;
    -webkit-text-decoration-skip-ink: none;
    text-decoration-skip-ink: none;
    -webkit-text-decoration-color: var(--link-color) !important;
    text-decoration-color: var(--link-color) !important;
    text-decoration-thickness: var(--link-thickness) !important;
    transition: --link-offset var(--animation), --link-thickness var(--animation), color var(--animation);
}

 :is(a.internal-link,
.cm-hmd-internal-link .cm-underline):hover,
 :is(a.internal-link,
.cm-hmd-internal-link .cm-underline):focus {
    color: var(--text-on-accent) !important;
    --link-offset: calc(var(--font-text-size) * -1 - var(--size-4-4));
    --link-thickness: calc(var(--font-text-size) + 10px);
}

 :is(.markdown-preview-view a.internal-link,
.cm-hmd-internal-link .cm-underline)::before {
    content: "";
    display: inline-block;
    transform: translateY(var(--size-2-1));
    width: calc(var(--font-text-size) - var(--size-2-1));
    height: calc(var(--font-text-size) - var(--size-2-1));
    margin-right: var(--size-2-1);
    background-color: var(--link-color);
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill=""><path d="M0 0h24v24H0V0z" fill="none"/><path d="M8 16h8v2H8zm0-4h8v2H8zm6-10H6c-1.1 0-2 .9-2 2v16c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11z"/></svg>');
}

 :is(.cm-hmd-internal-link,
.cm-link) {
    transition: color var(--animation);
}

.cm-url {
    color: var(--link-color) !important;
}

span.cm-formatting-link {
    color: var(--accent-active) !important;
}

body:not(.click-to-edit-link-in-live-preview) a.external-link {
    background-image: none;
    background-size: unset;
    padding-right: 0;
}

body:not(.click-to-edit-link-in-live-preview) span.external-link {
    display: none;
}

body.click-to-edit-link-in-live-preview :is(.cm-link .cm-underline,
.cm-hmd-internal-link .cm-underline) {
    pointer-events: none;
}


/* @settings
  
  name: theme-subframe7536
  id: theme-subframe7536
  settings:
      -
          id: click-to-edit-link-in-live-preview
          title: click to edit link in live preview
          description.zh: live preview 模式时点击链接进行编辑而不是跳转
          type: class-toggle
  */