%hover-simple-primary {
  color: scale-color($primary-color, $lightness: -15%);
  text-decoration: underline;
  background-color: $white;
}

%hover-simple-danger {
  color: scale-color($alert-color, $lightness: -15%);
  text-decoration: underline;
  background-color: $white;
}

.wig-link {
  user-select: none;
  &:hover {
    text-decoration: underline;
  }
  &--spacing {
    margin: rem-calc(8 12);
    padding: 6px 10px;
    display: inline-flex;
  }
  &--small {
    font-size: $small-font-size;
  }
  &--medium {
    font-size: $regular-font-size-global;
  }
  &--large {
    font-size: $medium-font-size-global;
  }
  &--gray {
    color: $gray;
    &:hover {
      color: scale-color($gray, $lightness: -15%);
    }
  }
  &--small {
    font-size: rem-calc(13);
  }
  &--medium {
    font-size: rem-calc(16);
  }
  &--large {
    font-size: rem-calc(19);
  }
  &--gray {
    color: $gray;
    &:hover {
      color: scale-color($gray, $lightness: -15%);
    }
  }
  &--white {
    color: $white;
    background-color: $gray;
    &:hover {
      background-color: scale-color($gray, $lightness: -15%);
    }
  }
  &--primary {
    color: $primary-color;
    &:hover {
      color: scale-color($primary-color, $lightness: -15%);
    }
  }
  &--primary-button {
    @extend button;
    @extend .wig-button;
    @extend .wig-button--primary;
    @extend .wig-button--mini-curved;
    @extend .wig-button--full;
    @extend .wig-button--normal-padding;
    @extend .wig-button--bold;
    display: flex;
    justify-content: center;
    align-items: center;
    &:hover {
      text-decoration: none;
    }
  }
  &--primary-simple {
    color: $primary-color;
    &:hover {
      @extend %hover-simple-primary;
    }
  }
  &--danger-simple {
    color: $alert-color;
    &:hover {
      @extend %hover-simple-danger;
    }
  }
  &--secondary {
    color: $secondary-color;
    &:hover {
      color: scale-color($primary-color, $lightness: -15%);
    }
  }
  &--secondary-button {
    @extend button;
    @extend .wig-button;
    @extend .wig-button--mini-curved;
    @extend .wig-button--full;
    @extend .wig-button--normal-padding;
    @extend .wig-button--bold;
    @extend .wig-button--secondary;
    display: flex;
    justify-content: center;
    align-items: center;
    &:hover {
      text-decoration: none;
    }
  }
  &--color-none {
    color: initial;
    &:hover {
      color: initial
    }
  }
  &--uppercase {
    text-transform: uppercase;
  }
  &--black {
    font-weight: $font-weight-black;
  }
  &--bold {
    font-weight: $font-weight-bold;
  }
  &--semi-bold {
    font-weight: $font-weight-semi-bold;
  }
  &--regular {
    font-weight: $font-weight-regular;
  }
  &--light {
    font-weight: $font-weight-light;
  }
  &--like-button {
    //appearance: button;
  }
}