@mixin link {
  display: inline-block;
  text-decoration: none;
  padding: $spacing-0;
  margin: $spacing-0;

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

@mixin link--color($color: $color-gray-800) {
  color: $color;
}

.c-link {
  @include link;
  @include link--color;

  &--info {
    @include link--color($color: $color-blue-500);
  }

  &--warning {
    @include link--color($color: $color-orange-500);
  }

  &--error {
    @include link--color($color: $color-red-500);
  }

  &--success {
    @include link--color($color: $color-green-500);
  }
}