a, a:visited {
  text-decoration: none;
}

.link--primary, .link--primary:visited {
  color: $interactive-color;
}

.link--brand, .link--brand:visited {
  color: $brand-color;
}

.link--secondary, .link--secondary:visited {
  margin: 0px;
  padding: 0.3em;
  color: $secondary-color;
}

.link--nav {
  color: $primary-color;
  border-bottom: 2px solid white;
}

.link--nav:hover {
  color: $interactive-color;
}

.link--nav-active {
  color: $interactive-color;
  border-bottom: 2px solid $interactive-color;
}


.link--icon, .link--icon:visited {
  display: flex;
  .link-text {
    padding-bottom: 2px;
    border-bottom: 1px solid transparent;
    transition: all 0.2s ease;
  }
  .icon-wrap {
    margin-left: 5px;
    padding-top: 3px;
    align-items: center;
    svg {
      width: 16px;
      height: 16px;
      stroke: $grey;
      transition: all 0.2s ease;
    }

    @media (max-width: $break-point-x-small) {
      padding-top: 0;
    }
  }
  &:hover {
    .link-text {
      border-bottom: 1px solid $brand-color;
    }
    svg {
      stroke: $brand-color;
    }
  }
}


.link--hover {
  display: inline-block;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: all 0.2s ease;
  &:hover {
    border-bottom: 1px solid $brand-color;
  }
}