/* ------------------------------ */
/* ------------------------------ */

/*

0.  BASIC
1.  EXTERNAL LINKS
2.  INTERNAL LINKS

*/

/* ------------------------------ */
/* ------------------------------ */

/* -------------------------------- 0. BASIC */
/* ----------------------------------------- */

a:hover {
  color: var(--color_active_light);
}

.dark a:hover {
  color: var(--color_active_dark);
}

/* ------------------------------ */
/* ------------------------------ */

/* -------------------------------- 1. EXTERNAL LINKS */
/* -------------------------------------------------- */

a.outside,
a.email {
  text-decoration: underline;
  color: var(--color_active_light);
}
.dark a.outside,
.dark a.email {
  text-decoration: underline;
  color: var(--color_active_dark);
}
a.outside:hover::after {
  content: "↗";
  display: inline-block;
  margin-left: calc(var(--sizeUnit) / 3);
}
a.email:hover::after {
  content: "✉";
  display: inline-block;
  margin-left: calc(var(--sizeUnit) / 3);
}
/* ------------------------------ */
/* ------------------------------ */

/* -------------------------------- 2. INTERNAL LINKS */
/* -------------------------------------------------- */

a.internal:hover,
a.internal:hover::after,
span.a.internal:hover,
span.a.internal:hover::after,
a.internal.perma,
[class*="ass-"].active {
  text-decoration: underline;
  text-decoration-style: dashed;
  color: var(--color_active_light);
}
.dark a.internal:hover,
.dark a.internal:hover::after,
.dark span.a.internal:hover,
.dark span.a.internal:hover::after,
.dark button.internal:hover,
.dark a.internal.perma,
.dark [class*="ass-"].active {
  color: var(--color_active_dark);
}
.dark button.internal:hover::after {
  border-color: var(--color_active_dark);
}

span[class*="ass-"] {
  position: relative;
}
.assElementMarker {
  position: absolute;
  z-index: 999;
  pointer-events: none;
  border: 3px solid blue;
  border-radius: 12px;
}
/* ------------------------------ */
/* ------------------------------ */