/*------------------------------------*\
    $LINKS
\*------------------------------------*/

a {
  text-decoration: none;
  color: rgb(var(--color-link));
  text-decoration: var(--text-decoration-link);
  transition: all var(--animation-duration-fast) var(--animation-easing-standard);
}

a:hover {
  color: rgb(var(--color-link-hover));
  text-decoration: var(--text-decoration-link-hover);
  opacity: var(--opacity-link-hover);
}

a > span {
  transition: var(--animation-easing-standard) var(--animation-duration-fast);
}

.u-has-accent,
.o-rte-text .u-has-accent {
  display: inline-block;
  padding-bottom: 2px;
  border-bottom: 2px dotted rgb(var(--color-border-standard));
  text-decoration: none;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.u-has-accent:hover,
.o-rte-text .u-has-accent:hover {
  color: rgb(var(--color-background));
}

.u-has-accent--neutral,
.o-rte-text .u-has-accent--neutral {
  color: rgb(var(--color-border-bold));
  border-bottom-color: rgb(var(--color-border-bold));
}

.u-has-accent--primary,
.o-rte-text .u-has-accent--primary {
  color: rgb(var(--color-primary-2));
  border-bottom-color: rgb(var(--color-primary-2));
}

.u-has-accent--quaternary,
.o-rte-text .u-has-accent--quaternary {
  color: rgb(var(--color-primary-1));
  border-bottom-color: rgb(var(--color-primary-1));
}

.u-has-accent--secondary,
.o-rte-text .u-has-accent--secondary {
  color: rgb(var(--color-link));
  border-bottom-color: rgb(var(--color-link));
}

.u-has-accent--secondary path {
  transition: var(--animation-duration-fast);
}

.u-has-accent--secondary:hover path,
.o-rte-text .u-has-accent--secondary:hover path {
  fill: rgb(var(--color-link-hover));
}

.u-has-accent-inline {
  @include inline-accent;
}