@import "../../../css/color/color";

@mixin link-type() {

  &.v-default {

    &:hover {
      color: $--bg-primary-lighter;
    }
    &:active {
      color: $--bg-primary-heavier;
    }
  }

  &.v-primary {
    color: $--bg-primary;
    &:hover {
      color: $--bg-primary-lighter;
    }
    &:active {
      color: $--bg-primary-heavier;
    }
  }

  &.v-success {
    color: $--bg-success;
    &:hover {
      color: $--bg-success-lighter;
    }
    &:active {
      color: $--bg-success-heavier;
    }
  }

  &.v-info {
    color: $--bg-info;
    &:hover {
      color: $--bg-info-lighter;
    }
    &:active {
      color: $--bg-info-heavier;
    }
  }

  &.v-warning {
    color: $--bg-warning;
    &:hover {
      color: $--bg-warning-lighter;
    }
    &:active {
      color: $--bg-warning-heavier;
    }
  }

  &.v-danger {
    color: $--bg-danger;
    &:hover {
      color: $--bg-danger-lighter;
    }
    &:active {
      color: $--bg-danger-heavier;
    }
  }
}

.v-link {

  cursor: pointer;
  color: #606266;
  font-weight: normal;
  font-size: 1rem;
  vertical-align: middle;

  &.v-disabled {
    opacity: .5;
    user-select: none;
    cursor: not-allowed;
  }

  span {

    display: inline-block;

    &:not(.v-disabled) {

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

      @include link-type();
    }
  }
}