@import url(../var.less);

@link-prefix: ~"@{prefix}link";

.@{link-prefix}{
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  position: relative;
  text-decoration: none;
  outline: none;
  cursor: pointer;
  padding: 0;
  font-size: @link-font-size;
  font-weight: @link-font-weight;

  &.is-underline {
    &:hover:after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      height: 0;
      bottom: 0;
      border-bottom: 1px solid @link-default-active-color
    }
  }

  &.is-disabled {
    cursor: not-allowed;
  }

  & [class*="w-icon-"] {
    & + span {
      margin-left: 8px;
    }
  }

  &.w-link--default  {
    color: @link-default-font-color;
    &:hover {
      color: @link-default-active-color
    }
    &:after {
      border-color: @link-default-active-color
    }
    &.is-disabled {
      color: @link-disabled-font-color
    }
  }

  @typeList: {
    primary: @link-primary-font-color;
    success: @link-success-font-color;
    warning: @link-warning-font-color;
    danger: @link-danger-font-color;
    info: @link-info-font-color;
  }
  
  each(@typeList, {
    &.w-link--@{key} {
      color: @value;
    }

    &:hover {
      color: mix(@value, @color-white, 80%);
    }
    &:after {
      border-color: @value;
    }
    &.is-disabled {
      color: mix(@value, @color-white, 40%);
    }
    &.is-underline {
      &:hover:after {
        border-color: @value
      }
    }
  })
}