Internal and external link styling

[brimwats]

would love to have these! here's what I have currently

<< External Links
──────────────────────────────────────────────────── */
.cm-commenturl,
.cm-s-obsidian span.cm-link,
.external-link {
  word-break: break-all;
  text-decoration: none;
  color: var(--text-accent-external);
  border-radius: 4px;
  background: none;
  padding-right: 0;
}


/* <<< Fold external URLs (CM6 Source Mode) */
body:not(.show-urls) .cm-s-obsidian:not(.is-live-preview) .cm-line:not(.cm-active) .cm-string.cm-url:not(.cm-formatting) {
	font-size: 0;
}

body:not(.show-urls) .cm-s-obsidian:not(.is-live-preview) .cm-line:not(.cm-active) .cm-string.cm-url:not(.cm-formatting)::after {
	content: "link";
	font-family: var(--icon-font);
	font-size: calc(var(--font-text-size) * 0.9);
	position: relative;
	top: 2px;
}

/* external link icon */
body:not(.show-external-link-icon) .external-link {
	background-image: none;
	padding-right: 0;
}


/* stylelint-disable-line no-duplicate-selectors */
/* :root {  
	--icon-font: "Material Icons (Filled)";
	--external-url: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='xMidYMid meet' viewBox='0 0 1536 1536'%3e%3cpath d='M1280 800V320q0-26-19-45t-45-19H736q-42 0-59 39q-17 41 14 70l144 144l-534 534q-19 19-19 45t19 45l102 102q19 19 45 19t45-19l534-534l144 144q18 19 45 19q12 0 25-5q39-17 39-59zm256-512v960q0 119-84.5 203.5T1248 1536H288q-119 0-203.5-84.5T0 1248V288Q0 169 84.5 84.5T288 0h960q119 0 203.5 84.5T1536 288z' fill='grey'/%3e%3c/svg%3e");
}
*/
/* .show-external-link-icon .external-link {
	background-position-y: 0.3em;
	background-image: var(--external-url);
} */

/* don't underline the formatting */

.external-link.external-link,
body:not(.show-urls) .cm-line:not(.cm-active) span.cm-url.cm-url {
    text-decoration: underline double 1px;
    color: var(--blue);
    font-weight: 500;
    cursor: default;
}

.external-link.external-link:hover,
body:not(.show-urls) .cm-line:not(.cm-active) span.cm-url.cm-url:hover {
	text-decoration: underline double 1px;
    color: var(--tomorrow-blue);
    font-weight: 600;
    cursor: pointer;
}

unresolved:

/* ───────────────────────────────────────────────── */
/* <<< Unresolved Links
──────────────────────────────────────────────────── */

.is-unresolved .cm-underline,
.is-unresolved.is-unresolved.is-unresolved.is-unresolved {
	color: var(--base0);
	opacity: .7;
}

.cm-hmd-internal-link:hover > .cm-underline,
.is-unresolved.is-unresolved.is-unresolved.is-unresolved:hover {
	color: var(--faded-blue);
	opacity: .9;
} 

/* unresolved gutter indicator */
.is-unresolved::after {
	content: "✘";
	font-size: .6rem;
	background-color: transparent;
	position: absolute;
	margin-top: -3px; /* move up to accounts for double unterline */
}

body:not(.no-unresolved-link-indicator) .markdown-preview-view .is-unresolved::before {
	left: 1.3em;
}

div > ul > li > ul > li > .is-unresolved.is-unresolved.is-unresolved::before {
	left: -4.2em;
}

div > ul > li > ul > li > ul > li > .is-unresolved.is-unresolved.is-unresolved::before {
	left: -6.7em;
}

div > ul > li > ul > li > ul > li > ul > li > .is-unresolved.is-unresolved.is-unresolved::before {
	left: -8.2em;
}

div > ul > li > ul > li > ul > li > ul > li > ul > li > .is-unresolved.is-unresolved.is-unresolved::before {
	left: -9.7em;
}

[brimwats]

results in something like this: