@import './theme/default';
@import './theme/font';

@mixin link-grey($prop) {
  @include theme-color($prop, disabled, color);
}

@mixin link-primary($prop) {
  @include theme-color($prop, link, color);
}

@mixin link-primary-hover($prop) {
  @include theme-color($prop, link, hover-color);
}

@mixin link-primary-active($prop) {
  @include theme-color($prop, link, active-color);
}

.zent-link {
  @include font-normal;
  @include link-primary(color);

  text-decoration: none;
  display: inline-block;

  &:link,
  &:visited,
  &:focus {
    @include link-primary(color);
  }

  &:hover {
    @include link-primary-hover(color);
  }

  &:active {
    @include link-primary-active(color);
  }

  &--weak {
    @include theme-color(color, weak-link, color);

    &:link,
    &:visited,
    &:focus {
      @include theme-color(color, weak-link, color);
    }

    &:hover {
      @include theme-color(color, weak-link, hover-color);
    }

    &:active {
      @include theme-color(color, weak-link, active-color);
    }
  }

  &.zent-link--disabled {
    @include link-grey(color);
    cursor: not-allowed;
  }
}