// Base
%nio-link {
  color: $palette-primary;
  text-decoration: none;
  margin-right: 1rem;
  cursor: pointer;
  font-size: $font-size-medium;

  &:hover {
    color: $palette-dark;
  }
}

// Variants
%nio-link--before {
  display:inline-block;
  &:before {
    content: attr(data-icon);
    display: inline-block;
    width: 1.5rem;
    text-align: right;
    margin-right: 0.4rem;
    font-size: $font-size-large;
  }
}

%nio-link--after {
  display:inline-block;
  margin-right: 1.5rem;
  position:relative;
  &:after {
    content: attr(data-icon);
    font-size: $font-size-large;
    margin-left: 0.4rem;
  }
}