/* Link style that can be used on an anchor link, button, or any other element */

button.link {
  font-family: Montserrat;
}

.link {
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition);
  color: var(--color-signature-blue-text);
}

.link:not(.link--black, .link--light-blue, .link--red):hover {
  color: var(--color-dark-blue);
}

.link:not(.link--underline):hover {
  text-decoration: underline;
}

.link--light-blue {
  color: var(--color-light-blue-text);
}

.link--light-blue:hover {
  color: var(--color-light-blue-text);
}

.link--black {
  color: var(--color-nearly-black);
}

.link--red {
  color: var(--color-brand-red-darkened);
}

.link--icon {
  align-items: center;
  display: inline-flex;
  gap: var(--space-xs);
  text-decoration: underline;

  svg {
    height: auto;
    width: 1.25rem;
  }
}

.link--underline {
  position: relative;
  text-decoration: none;
  background: none;
  padding: 0;
  font-weight: var(--font-weight-medium);

  /* Links with a custom underline have to be on a single line */
  text-wrap: nowrap;
}

.link--underline::after {
  content: '';
  position: absolute;
  background: currentColor;
  bottom: -0.125rem;
  left: 0;
  right: 0;
  height: 1px;
  transition: var(--transition);
}

.link--underline:hover::after {
  transform: translate(0, -0.0625rem);
}