// Links

.Link {

color: var(--color-text-link);

&:hover {
  text-decoration: underline;
  cursor: pointer;
}

}

.Link–primary {

color: var(--color-text-primary) !important;

&:hover {
  color: var(--color-text-link) !important;
}

}

.Link–secondary {

color: var(--color-text-secondary) !important;

&:hover {
  color: var(--color-text-link) !important;
}

}

.Link–muted {

color: var(--color-text-secondary) !important;

&:hover {
  color: var(--color-text-link) !important;
  text-decoration: none;
}

}

// Set the link color only on hover // Useful when you want only part of a link to turn blue on hover .Link–onHover {

&:hover {
  color: var(--color-text-link) !important;
  text-decoration: underline;
  cursor: pointer;
}

}

// When using a color utility class inside of a link class, // color should change with link on hover. .Link–secondary, .Link–primary, .Link–muted {

&:hover [class*="color-text"] {
  color: inherit !important;
}

}