/**
 * Text component style.
 *
 * 1. Since the link icon is always a icon-down arrow, we need to rotate it.
 */
.c-link {
  display: flex;
  align-items: center;
  padding: 0;
  font-weight: 500;
  background: transparent;
  border: 0;
  appearance: none;
  text-decoration: underline;
}
.c-link .icon {
  line-height: 0;
  margin-top: var(--s-3xs);
  margin-left: var(--s-3xs);
}
.c-link:hover, .c-link:focus {
  color: var(--c-link-hocus);
  cursor: pointer;
}
.c-link:active {
  color: var(--c-link-active);
}
.c-link.breadcrumb {
  display: inline-flex;
  align-items: center;
  margin-top: 0;
  font-size: 0.875rem;
}
.c-link.breadcrumb .icon {
  top: 0;
}

.link--text {
  color: var(--c-gray-dark);
  text-decoration: underline;
}
.link--light {
  font-weight: 400;
}
.link--bold {
  font-weight: 700;
}